非常好的网站建设公司,网站建设的定位是什么意思,尚层装饰官网,全国十大物联网平台公司本篇教程介绍了HTMLCSS入门之两种图标字体库#xff0c;希望阅读本篇文章以后大家有所收获#xff0c;帮助大家HTMLCSS入门。## 0. 前言比较基础的图标加载#xff1a;和块元素的背景background: url(./x.png).页面多图标时#xff0c;使用雪碧图(多个png压缩成一个png…本篇教程介绍了HTMLCSS入门之两种图标字体库希望阅读本篇文章以后大家有所收获帮助大家HTMLCSS入门。## 0. 前言比较基础的图标加载和块元素的背景background: url(./x.png).页面多图标时使用雪碧图(多个png压缩成一个png定位来使用)减少图片所占空间。大屏显示为保证图标清晰度可以使用svg格式的图片。svg是矢量图直接更改svg代码中path的fill改变颜色。可自编辑开源svg库 [http://www.iconfont.cn/home/index](http://www.iconfont.cn/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. Font Awesomeclassfa fa-name fa-size fa-pull-left 前两个必有优点开箱即用缺点扩展麻烦项目加载过多无用图标[http://fontawesome.dashgame.com/](http://fontawesome.dashgame.com/)## 2. IcoMoonclassicon-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知识
