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标签是不能添加伪元素的.
