字体图标
使用现有的免费字体图标
有一个好用的 html5应用 。通过此应用你可以选择IcoMoon提供的免费或者购买收费图标，然后生成字体。如下图所示，
下载得到生成好的字体后，它会帮我们生成好css代码，如下，
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-rah7ee'); src:url('fonts/icomoon.eot?#iefix-rah7ee') format('embedded-opentype'), url('fonts/icomoon.woff?-rah7ee') format('woff'), url('fonts/icomoon.ttf?-rah7ee') format('truetype'), url('fonts/icomoon.svg?-rah7ee#icomoon') format('svg'); font-weight: normal; font-style: normal; } .icon { font-family: 'icomoon'; 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; } .icon-home3:before { content: "\e600"; } .icon-office:before { content: "\e601"; } .icon-newspaper:before { content: "\e602"; } .icon-pencil:before { content: "\e603"; }
ok，事已至此，我们已经得到了需要的字体、css代码。现在我们可以在html页面使用图标字体来制作页面小icon了。
这里我们有两种方式来使用图标字体，一种是 html实体 + webfont ，一种是 css样式 + webfont 。
html实体+webfont
还记得文首提到的天猫首页中的小icon图标么？现在我再来看看它的源代码，
<li> <s class="menu-nav-icon fp-iconfont">&#x 3451;</s> </li> <li> <s class="menu-nav-icon fp-iconfont">&#x 3459;</s> </li> <li> <s class="menu-nav-icon fp-iconfont">&#x 346c;</s> </li>
.fp-iconfont {
font-family: tm-fp-font !important;
}
这里我们只截取了一部分html代码，并去除了多余的样式因素。
从上述的代码中，我们看到 s 标签中包括了一些十六进制字符（以 &#x 开始，我这里强制添加了一个空格，不然实体就被浏览器解析了），这些奇怪的字符的作用就是配合自定义font-family进行页面渲染，从而展现为一个个icon小图标。
回头看看我们之前从 https://icomoon.io/app 上下载自定义字体时，是不是也给每一个icon图标标识了一个 html实体 （e600、e601等等）？
css样式+webfont
我们除了使用html实体配合font之外，还可以使用css样式配合font。
在 https://icomoon.io/app 上下载自定义图标字体时，会同时得到相关的css代码，如下，
.icon { font-family: 'icomoon'; 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; } .icon-home3:before { content: "\e600"; } .icon-office:before { content: "\e601"; } .icon-newspaper:before { content: "\e602"; } .icon-pencil:before { content: "\e603"; }
所以我们只要在需要图标的html代码中添加相应的css样式即可，比如，
<li> <a href="#"><i class="icon icon-home3"></i>主页</a> <a href="#"><i class="icon icon-office"></i>归档</a> </li>
可见，这种方式不再需要在html代码中书写相应的html实体，因为我们给相关元素添加了伪元素，将html实体转移到了伪元素中。
文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站
