制做自定义的字体图标

字体图标比图片更加灵活，可以使用字体的方式控制图标的相关样式表现。Bootstrap使用的font awesome囊括了不少经常使用的图标供咱们使用。但有时候这里面的图标并不能知足咱们的需求，这时，咱们就须要定制本身的图标了。

假若有一张你喜欢的图标，想经过字体的方式控制它在页面的表现，你须要按照以下方法作：

1. 你须要把该图标转换为svg格式，至于如何转换，身为ps渣的我也不会，自行百度，也可参考如下网址的方法：http://jingyan.baidu.com/article/9158e000342ba6a25412281f.html?qq-pf-to=pcqq.c2c。这里我拿一个现成的svg图标作示例，就是开源中国首页的logo图标。把它下载下来以后，须要先按照你须要的尺寸修剪。ps好像不能处理svg格式图片，咱们可使用在线的方式来处理。你须要访问以下网址：http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Feditor.method.ac%2F&h=2000&c=&n=，这个工具也能够把普通格式(*.png, *.jpg等)的矢量图转换为svg格式。最后生成的svg格式图片(oschina.svg)以下：

2. 在线访问以下网址：https://icomoon.io/app/#/select，以下图所示，点击Import Icons按钮，上传oschina.svg，选中上传的图片以后再点击最下面的Generate Fonts按钮，跳转到另外一个页面。

3. 跳转到新的页面以后，你能够对图标进行其它的相关设置如重命名等操做，而后点击Download按钮下载便可。

4. 下载完成后，解压缩文件，fonts文件夹中的四个文件(*.eot, *.svg, *.ttf, *.woff)就是字体图标须要的四个文件。（下载的文件中有相关示例）