【css】最近使用的两种图标字体库
2018-06-24 02:17:54来源:未知 阅读 ()
## 0. 前言
比较基础的图标加载:<img src="x.png">和块元素的背景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 Awesome
class="fa fa-name fa-size fa-pull-left" 前两个必有
优点:开箱即用
缺点:扩展麻烦,项目加载过多无用图标
[http://fontawesome.dashgame.com/](http://fontawesome.dashgame.com/)
## 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";
}
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css渲染(二) 文本
下一篇:html、css简述面试题
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash