【css】最近使用的两种图标字体库

原创 zhaocchen 随笔 全栈 118阅读 14 天前 举报

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://fontawesome.dashgame.com/

2. IcoMoon

class="icon-name"

优点:易于扩展,包括自己团队做的svg图标可在官网生成相应的fonts文件

缺点:扩展更新,一旦出现问题,会影响项目其他图标的显示。无团队管理。

https://icomoon.io/app/#/select

3. iconfont

优点:在线svg下载和简单编辑。自定义图标字体库。团队管理,可在线引用。

缺点:

4. 更新图标库

扩展自己的图标库

  1. 扩展.eot.svg.ttf.woff等相关字体库
  2. 伪类
    .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%;

不可在图片上添加文字

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复