在制作网页时,我们会在很多的地方使用到一些用来修饰的小图标。在以往,我们一般都选择使用 .png 格式的图标来进行修饰。但随着审美观的改变、后期维护的成本。png图片作为修饰图标的方法已经显得有些落伍。所以在近几年,逐渐兴起了使用 IconFont 来代替图片对网页小图标进行修饰的方法。先来说说使用 IconFont 的优势: 1. 便于后期维护、更新; 2. 相对于加载几十甚至几百个图片来讲,加载字体更加利于用户体验; 3. 矢量图标不受大小控制,可使用font-size及color任意匹配图标大小及颜色; 4. 可以添加一些视觉效果如:阴影、旋转、透明度; 5. 样式风格统一,助于UI界面的整体性; 6. 兼容IE6; IconFont 该如何使用呢? 如果需要应用到网站上,首先我们需要先将它分为两个部分。 一:图标字体库。 二:CSS文件。 一,图标库。这个就和我们电脑里自带的字体库一样,只不过它们展现出来的是各种风格的文字、字母、数字(比如:黑体、微软雅黑、宋体等)。而 IconFont 展现出来的是各种网站常用图标。这里 IconFont 的图标库需要包含: .eot / .svg / .ttf / .woff 4个文件来支持不同环境下的各种浏览器。 二,CSS文件。该文件主要是用于设置图标库名称、图标视觉效果以及预设各个图标的class类选择器。 也就是说,该CSS文件应当包含如下三个结构 1.设置字体名称及关联图标库,这里需正确引入图标库文件所在路径。 ```css @font-face {font-family: "YuLunBlog-iconfont"; src: url('../fonts/iconfont.eot'), /* IE9*/ url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('../fonts/iconfont.svg#YuLunBlog-iconfont') format('svg'); /* iOS 4.1- */ } ``` 2.定义图标库的class类选择器及其他视觉效果。这里的 font-family 值需要与上面定义的保持一致。 ```css .YuLunBlog-iconfont { font-size: 18px; font-family:"YuLunBlog-iconfont" !important; vertical-align: middle; } ``` 3.预设图标库内图标的class类选择器 `.iconfont-gotop:before { content: "\e684"; }` 这里使用:before选择器,来定义每一个图标。而 content 中的值,可以通过 FontCreator 软件选取每个图标中的属性来获得。 接下来,我们只需要把每一个图标,对应定义一个class选择器,比如 ```css .iconfont-gotop:before { content: "\e684"; } .iconfont-music:before { content: "\e60f"; } .iconfont-tags:before { content: "\e64b"; } .iconfont-jieri:before { content: "\e727"; } .iconfont-jishiqi:before { content: "\e728"; } .iconfont-pad:before { content: "\e64c"; } .iconfont-lunzi:before { content: "\e64d"; } .iconfont-jiandao:before { content: "\e64e"; } .iconfont-xianshiqi:before { content: "\e64f"; } .iconfont-zhaoxiangji:before { content: "\e650"; } .iconfont-danfanxiangji:before { content: "\e651"; } .iconfont-dayinji:before { content: "\e652"; } .iconfont-user-zhanzhang:before { content: "\e653"; } .iconfont-chajian:before { content: "\e654"; } .iconfont-arrow1-bottom:before { content: "\e674"; } .iconfont-arrow1-left:before { content: "\e678"; } .iconfont-arrow1-top:before { content: "\e679"; } .iconfont-arrow1-right:before { content: "\e67a"; } ``` 这样,我们在网页中,引入该css文件。便可以通过 ```css <i class="YuLunBlog-iconfont iconfont-gotop"></i> ``` 来引入对应的图标了。 关于后期对 IconFont 的更新与维护,建议到 Iconfont-阿里巴巴矢量图标库(https://www.iconfont.cn)取材。