本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
##0.前言
比较基础的图标加载:和块元素的背景background:url(./x.png).
页面多图标时,使用雪碧图(多个png压缩成一个png,定位来使用),减少图片所占空间。
大屏显示,为保证图标清晰度,可以使用svg格式的图片。svg是矢量图,直接更改svg代码中path的fill改变颜色。
可自编辑开源svg库[/home/index](/home/index"阿里巴巴图标库")
图标字体库,图标被生成字体文件,通过class决定图标,font-size决定大小,color决定颜色。主要使用的是css中伪类:before、css3中的@font-face,因而继承了font的其他规则。
@font-face{font-family:myFirstFont;src:url('Sansation_Light.ttf'),url('Sansation_Light.eot');/*IE9+*/}div{font-family:myFirstFont;}适用:单色图标
##1.FontAwesome
class="fafa-namefa-sizefa-pull-left"前两个必有
优点:开箱即用
缺点:扩展麻烦,项目加载过多无用图标
[/](/)
##2.IcoMoon
class="icon-name"
优点:易于扩展,包括自己团队做的svg图标可在官网生成相应的fonts文件
缺点:扩展更新,一旦出现问题,会影响项目其他图标的显示
[https://icomoon.io/app/#/select](https://icomoon.io/app/#/select)
##4.深度理解
扩展自己的图标库
1.扩展.eot.svg.ttf.woff等相关字体库
2.伪类
.icon-name:before{content:"\f003";}
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!