制作自定义的字体图标

2019独角兽企业重金招聘Python工程师标准>>>

字体图标比图片更加灵活，能够使用字体的方式控制图标的相关样式表现。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)就是字体图标需要的四个文件。（下载的文件中有相关示例）

 

 

 

 

转载于:https://my.oschina.net/u/1756499/blog/679995