本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
在css中,将fonts和style.css文件引入后,可以使用行内标签添加字体图标,语法格式为“<行内标签元素 class="名称">”。字体图标颜色、大小都可以通过对应的css来修改;文件比较小,利于页面减少http请求。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在线生成
通过https://icomoon.io/app/#/select 这个网站来生成。当然还有其他一些类似的网站,但是这个真的很赞,很赞,很赞,说三遍。
导入所有SVG格式的图标,全选点击GenerateFont生成对应的字体图标。然后下载已打包好的所有文件。
页面引用相应的字体图标
下载的打包文件目录结构如上图所示,我们只需要引入fonts和style.css文件即可。fonts文件里如下所示,分别为:eot压缩字库,整合后的svg图标,ttf字体,woff字体格式。
style.css里是对fonts文件的引入和相应图标的样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
我们可以对上面样式表进行修改,以达到自己页面显示的最佳效果。
1 |
|
需要什么图标,我们只需给一个行内标签(span,i,em)添加对应的class即可。
总结
使用字体图标确实非常方便,颜色、大小都可以通过对应的css来修改。而且文件比较小,有利于页面加载减少了http请求。
但是如果一个字体图标文件已经生成,我们又有新的图标需要增加时,那么又需要重新生成相应的fonts文件和修改css文件。解决的办法是在生成之前尽可能的把所有用到的图标都加上,或者使用第三方字体图标库。
推荐学习:css视频教程
以上就是css字体图标怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者