css的字体图标使用

1. 说到字体图标, 现在我所做的项目中用到很多.

比如一个路径节点图

image.png

, 每个节点都可以用字体图标来代替, 这样做能使得 颜色/图形大小等待可以更方便的调整.

2. 怎么使用字体图标呢?

2.1 首先, 你需要用ps将你需要的图标导出成svg, 然后通过这个链接https://icomoon.io/app/#/select 将那些svg引入. 生成字体图标的操作可以参照这个链接http://blog.csdn.net/u013938465/article/details/50680468 的介绍(额, 我只是代码的搬运工=. =), 很详细的呢

2.2 下面就是需要在你的项目里面设置一些东西了

2.2.1 在css文件里面需要先引入你再2.1步骤中生成的文件, 应该是四个文件,像这样的样子:

image.png

, 通过设置

@font-face{
        font-family: 'icomoon';
        src:  url('font/icomoon.eot?pylhfs');
        src:  url('font/icomoon.eot?pylhfs#iefix') format('embedded-opentype'),
        url('font/icomoon.ttf?pylhfs') format('truetype'),
        url('font/icomoon.woff?pylhfs') format('woff'),
        url('font/icomoon.svg?pylhfs#stage-font') format('svg');
        font-weight: normal;
        font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
      /* use !important to prevent issues with browser extensions that change font */
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

2.2.2 标签类名必须以 icon- 开头, 然后你就可以'为所欲为'啦. 通过给该标签添加伪元素(::before/::after), 然后通过设置伪元素样式中的content属性, 其值为你需要添加的字体图标的值. 然后通过font-size可以改变图标的大小, color改变图标的颜色......

ps: i标签是不能添加伪元素的.