页面设计用字体代替图标

IcoMoon图标字体

做B/S系统设计时需要大量的图标，一般的做法是用PS做图标文件，文本说的是字体，用SVG绘制图标.

其好处大家都很清楚，可以随意设置大小，颜色等，目前已经被很多大网站使用，如Github等，我就不多说了。

将ICON生成字体

推荐在线工具 IcoMoon，一款非常好的在线ICON2FONT的工具，默认提供几个常用的ICON库，也可以额外选择，或者自己上传，选择要生成的ICON点Font就可以生成并下载，选择的方法可以是点选或拖动选择，不支持全选。

下载后的包里有字体文件，CSS，HTML一整套，字体文件和CSS是你要用到的，而HTML是教你如何使用，和所有图标的字体编号和样式名字方便你选择使用。

使用方法

  1. 用法相当简单，加入下载包里的样式文件，如：icomoon.css

  2. 在html元素里加入额外标签 data-icon 值是下载包里html页面显示的图标下面的值，如：，这样就会生成一个图标伪元素来显示图标

    如：<div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div>

  3. 第二方法是使用样式，同样会产生一个图标的伪元素来显示图标

    如：<span aria-hidden="true" class="icon-pushpin"></span>

  4. 自定义使用

    加载字体

    @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
}

    声明样式

    .iconfont{
    font-family: 'icomoon';
    content: '\e000'; /*相当于& #xe000; */
}

    由于字体文件的后缀很特殊，一些WEB容器默认不支持，就是无法正确下载到eot，woff等文件，我的解决办法是统一在后面加上.css这样就可以正确下载并被浏览器使用，浏览器会通过 format('woff') 来识别功能。

posted @ 2013-06-19 13:40  土豆的奥特之父  阅读(1083)  评论(0)  编辑  收藏  举报