脚本宝典收集整理的这篇文章主要介绍了css字体图标怎么用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在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字体格式。
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?n54c0o'); src: url('fonts/icomoon.eot?n54c0o#iefix') format('embedded-oPEntype'), url('fonts/icomoon.ttf?n54c0o') format('truetype'), url('fonts/icomoon.woff?n54c0o') format('woff'), url('fonts/icomoon.svg?n54c0o#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues wITh browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-VARiant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-OSX-font-smoothing: grayscale; } .icon-uniE900:before { content: "\e900"; } .icon-uniE901:before { content: "\e901"; } .icon-uniE902:before { content: "\e902"; } .icon-uniE903:before { content: "\e903"; } .icon-uniE904:before { content: "\e904"; } .icon-uniE905:before { content: "\e905"; }
我们可以对上面样式表进行修改,以达到自己页面显示的最佳效果。
<span class="icon-uniE901"></span>
需要什么图标,我们只需给一个行内标签(span,i,em)添加对应的class即可。
总结
使用字体图标确实非常方便,颜色、大小都可以通过对应的css来修改。而且文件比较小,有利于页面加载减少了http请求。
但是如果一个字体图标文件已经生成,我们又有新的图标需要增加时,那么又需要重新生成相应的fonts文件和修改css文件。解决的办法是在生成之前尽可能的把所有用到的图标都加上,或者使用第三方字体图标库。
推荐学习:css视频教程
以上就是css字体图标怎么用的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的css字体图标怎么用全部内容,希望文章能够帮你解决css字体图标怎么用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。