字体图标库使用方法

简介: 一些字体图标库的网站https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www.bootcss.

一些字体图标库的网站

https://icomoon.io/app/#/select
http://www.iconfont.cn/
http://www.bootcss.com/
http://www.bootcss.com/p/cikonss/

 以第一个链接网站里的字体为例

选择自己需要图标,点击右下角下载下来

继续点击右下角——点击下载

 

然后下载的文件一般都是这几个基本部件

把fonts文件夹复制到自己的项目中根目录中

打开css文件

把代码复制到自己的某个css文件中,然后html引用,重点注意红笔圈的地方,可以分别引用到单独html对应的css中

配置路径信息——在css中找到font文件夹并找到文件夹下的字体文件

设置图标样式,给个统一的类名,全局调用,比如我这里设置的所有的i标签给一个icon的类名

类样式可以根据自己的项目写一些公共的

我这里直接复制的腾讯课堂的代码过来都可以用,所以说代码这里大同小异,具体不同的可以利用图标的名字,设置不同的类名,再细调

 

对应的图标类名,引到html图标标签的class处即可

例如:

 我这里要用第一个message的图标,我在html中这样引用:

另外我在css中设置其单独样式:

 

好了,大功告成!

对了,还有兼容ie老爷爷的问题呢,参考下边这两篇文章进行整理:

font awesome ie7兼容问题:http://www.imooc.com/article/18185?block_id=tuijian_wz

CSS Expression用法总结  :http://jungle330549598.blog.163.com/blog/static/16650655020121110115448568/

 

 

-------------------------------------------------------------------------------------正经分割线!!!--------------------------------------------------------------------------------------------------------------------------

声明:

  请尊重博客园原创精神,转载或使用图片请注明:

  博主:xing.org1^

  出处:http://www.cnblogs.com/padding1015/

目录
相关文章
|
4月前
GreenSock动效库TweenMax简单使用代码片段
GreenSock动效库TweenMax简单使用代码片段
|
4月前
|
XML 编解码 前端开发
【web组件库系列】封装自己的字体图标库
【web组件库系列】封装自己的字体图标库
106 0
|
4月前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
4月前
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
168 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
|
4月前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
105 0
|
4月前
|
JavaScript 前端开发
three.js 官方给的压缩包如何使用?three.js基础官方文件使用方法
three.js 官方给的压缩包如何使用?three.js基础官方文件使用方法
64 0
|
10月前
|
移动开发 前端开发
uniapp导入样式坑
uniapp导入样式坑
34 0
|
人工智能 前端开发
前端封装库/工具库的字体/图标之Iconfont
在前端开发中,图标是不可或缺的一部分。传统的图片素材虽然能够满足需求,但使用方式较为繁琐,还会增大项目的体积和加载时间。随着前端技术的发展,字体/图标库逐渐成为了替代传统图片素材的新选择。其中一个非常流行的字体/图标库就是 Iconfont。
304 1
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
392 1
|
Python
Python mplfinance库④ 如何自定义style样式
Python mplfinance库④ 如何自定义style样式
1348 0
Python mplfinance库④ 如何自定义style样式