字体图标库使用方法

一些字体图标库的网站

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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博客

ExtJs八(ExtJs Mvc创建ViewPort续)

现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的(deferredRender值默认为true),但是它会预加载所有的类,因而当类文件很多的时候...

821
来自专栏前端新视界

构建通用的 React 和 Node 应用

原文:Build a universal React and Node App 演示:https://judo-heroes.herokuapp.com/ 译者...

3137
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用③TodoList中)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3324
来自专栏搞前端的李蚊子

vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> </div...

4479
来自专栏守望轩

Visual Studio 2008 每日提示(二)

#011、 全屏模式 原文地址:http://blogs.msdn.com/saraford/archive/2007/08/09/did-you-know-...

2968
来自专栏疯狂的小程序

微信小程序组件化编程和实践(上)

从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。查看自己使用的小程序基础库版本,可以通过在开发者工具右侧点击详情查看:

8027
来自专栏从零开始学自动化测试

python测试开发django-7.模板继承

打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了。

903
来自专栏BY的专栏

iOS开启热点或定位时状态栏变化导致布局改变

5085
来自专栏谈补锅

免费真机调试 -- Xcode7

  刚新安装了Xcode7 Version 7.1 beta , 据说这个版本可以免费真机调试,于是用了一个新的AppID测试了,发现真的可以免费真机调试了呢!...

8583
来自专栏快乐八哥

使用jQuery封装实用函数

一、引言 项目开发中,前端会有一个辅助工具类的js文件,比如cookie的操作,团队成员自己封装的方法。大多数时候,我们开发人员自己都是写一个全局函数,不考虑后...

2375

扫码关注云+社区

领取腾讯云代金券