0. 前言
比较基础的图标加载:<img src="x.PNG"> 和块元素的背景 background: url(./x.PNG).
页面多图标时, 使用雪碧图 (多个 PNG 压缩成一个 PNG, 定位来使用), 减少图片所占空间.
大屏显示, 为保证图标清晰度, 可以使用 svg 格式的图片. svg 是矢量图, 直接更改 svg 代码中 path 的 fill 改变颜色.
可自编辑开源 svg 库 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://Font Awesome.dashgame.com/ http://Font Awesome.dashgame.com/
- 2. IcoMoon
- class="icon-name"
优点: 易于扩展, 包括自己团队做的 svg 图标可在官网生成相应的 fonts 文件
缺点: 扩展更新, 一旦出现问题, 会影响项目其他图标的显示. 无团队管理.
- https://icomoon.io/App/#/select https://icomoon.io/App/#/select
- 3. iconfont
优点: 在线 svg 下载和简单编辑. 自定义图标字体库. 团队管理, 可在线引用.
缺点:
4. 更新图标库
扩展自己的图标库
扩展. eot.svg.ttf.woff 等相关字体库
伪类
- .icon-name:before {
- content: "\f003";
- }
5. 常见问题
图标未闭合
需处理 svg 为闭合路径.
颜色填充
导入时最好, 无颜色填充.
- .icon-name:before {
- content: "\f003";
- }
CSS 中有颜色时, 使用时 color 会失效.
- .icon-name:before {
- content: "\f003";
- color: red;
- }
如何处理圆形图标
- display: block;
- width: 30px;
- height: 30px;
- background-color: red;
- border-radius: 50%;
- -moz-border-radius: 50%;
- -weblit-border-radius: 50%;
不可在图片上添加文字
来源: http://www.qdfuns.com/article/34061/27157a71695a926870c6601b87a21729.html