Icon Font基础使用

目前说到Icon Font已经不是什么新鲜词了,本站当初在构建时就考虑到想要尝试这一新鲜技术。还有就是想在下次项目中得到使用。

主要还是CSS3里自定义字体(@font-face),现在各大浏览器都已经支持,即使是古老的IE系列,也已经得到了很好的支持。

至于优缺点,大致说说我们之前用图片时的经历。先是将各种小图标拼合处理(其实使用了一些autosprite工具之后,好像这些也都能够很容易的处理完),图标尺寸,颜色,文件格式等一系列问题。当你使用字体图标之后,文件大小得到了有效的控制,图标自身的属性(颜色、大小、透明)修改起来非常方便。但是制作字体图标,也增加了重构的成本,相比后期维护会省时省力很多。

下面大概就说一下Icon Font的基础使用,至于Icon Font的制作部分打算在今后的文章里做深入介绍,因为要用到字体制作软件,其实也就是将Icon的矢量图导入字体里即可。

开始使用

  • 在CSS中先使用font-face字体声明,以下使用的code均来自icomoon,其中在icon是的使用上,有两种方法,一是在标签上用data-属性,另一种是使用class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

/* Instead of a list of all class selectors, you can use the generic selector below, but it's slower:[class*="icon-"] { */
.icon-newspaper, .icon-office, .icon-pencil {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-newspaper:before {
content: "\e000";
}
.icon-office:before {
content: "\e001";
}
.icon-pencil:before {
content: "\e002";
}
  • 页面中的使用
1
2
<div class="fs1" aria-hidden="true" data-icon=""></div>
<span aria-hidden="true" class="icon-newspaper"></span>

以上示例来自于icomoon,再赞叹此服务如此NB的时候,自己不禁又……上手容易,而且本身提供了好几个图标库,日常使用基本足够,要是难以满足,还可以导入自己的SVG文件之后,重新打包生成,这些都是没问题的。

icon-font-basic-used-1

icon-font-basic-used-2

icon-font-basic-used-3

icon-font-basic-used-4

经过简单的几部之后,基本就可以按照你的要求,打包下载。还有一些细节部分,就不一一说明了,在你尝试之后绝对会有惊喜!

说到Font Icon,还有一个不得不提的就是Font Awesome,这套图标是Twitter Bootstrap中用到的,现在除了自身起初用到的部分,已经扩充到361 Icons,各种特点和使用就不一一介绍了,有兴趣的可以去官网一探究竟!