用icomoon将icon转换为字体 - Forum

Page 1 of 1
1

用icomoon将icon转换为字体 (Turn the icon into font via icomoon)

用icomoon将icon转换为字体

Seven

Date Fr, 2013-07-19, 17:02 | Msg 1

使用icon是极好的有木有，细节美化了有木有，信息交互更形象了有木有。

传统使用icon的方法一般有两种：

一种是插img
一种是加入背景

但是——

尺寸是固定的有木有，颜色不能变有木有，要改变尺寸或颜色，唯一的方式只有再做一个别的尺寸或颜色的icon

如果——

是文字，要变尺寸可以改字号，要换颜色也可以有

多木方便有木有

其实——

真的可以哦，只要将ico变成文字

大家先看看华丽的搜狗输入法

♈♉♊♋♌♍♎♏♐♑♒♓

其实打字是可以打出很多符号的，但是有时往往现有的符号不能满足我们对icon的需求肿木办乜

今天推荐大家一款ico字体生成工具icomoon，其实网上还有很多这样的工具，比如fontello

icomoon 网址 >

ico本身自己有近700个icon字

你可以从中选择你需要的，你也可以使用import icons上传自己做的icon哦（要.svg的，或者字体格式文件），全部选好之后，还可以设置将icon打出来的编码，弄好之后便可以生成了，生成下载下来，便可以使用了，使用方法如下：

首先在下下来的文件中找到名为font的文件夹，里面有几种字体文件，如果你要兼容所有browser，那么有四个要用到哦，分别是ttf, eot, svg, woff

在css中引入icon字体，代码如下

Code

@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');
}

再指定字体，比如给a标签用这个ico字

Code

a {
font-family:'icomoon'
}

接着，便可以在页面中使用这种ico字了，怎么用呢，还记着那些编码吗？悲催忘记了也木有关系哦，在下载的文件夹中有个index.html，打开一看，能看到每个icon的编码，将ico写出来还有两种方式：

一种直接html里面写啦

Code

--------------------分割线--------------------

另一种则是在css里面写

Code

a:before {
content: "\e010";
}

--------------------分割线--------------------

还有一种是只在html5中支持的写法

Code

a:before {
content: attr(data-icon);
}

html里这样写

Code

Seven

Date Tu, 2013-12-31, 17:37 | Msg 2

TIP：@font-face的路径可以是相对也可以是绝对，but you can not use http://asite.com/font.ttf on bsite.com

用icomoon将icon转换为字体 (Turn the icon into font via icomoon)

Page 1 of 1
1