icomoon 制造字体图标

icomoon 制造字体图标

一 制作字体文件

今天为大家推荐一种非常好用在字体图标制作方法。使用icomoon制作自己需要的图标文件。

首先，打开icoMoon网站，选择自己所需要的图标，这里我我选中了10个图标文件。如下图。



当然你可以随意选择自己喜欢的图标，也可以上传自己已经做好的图标文件，选择好喜欢的图标之后点击Generate Font生成字体，如上图标注所示。点击进入后，可以看到自己选择的图标展示。如下图所示。



此外，你也能在做一些自己所需要的配置，如前缀，字体文件名称，兼容IE6等等。在配置完成之后就可以下载自己做好的字体文件啦。是不是很简单。

二 使用字体文件

将下载的包文件解压之后可以看到目录包括如下所示



可以简单阅读下Read Me.txt文件。或打开demo.html在浏览器中运行，检查源码就可以知道使用方式。如何要是用在自己的项目中，可以拷贝fonts目录可以style.css文件。在自己的项目文件中引入style.css文件，就可以按照字体使用定义的图标了。如果自己css在另外一个css目录下，记得一定要更改style.css下面的路径。

附录下更改的目录，就是换成当前目录的上一级目录。

@font-face {
font-family: 'icomoon';
src:  url('../fonts/icomoon.eot?e4ctx8');
src:  url('../fonts/icomoon.eot?e4ctx8#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?e4ctx8') format('truetype'),
url('../fonts/icomoon.woff?e4ctx8') format('woff'),
url('../fonts/icomoon.svg?e4ctx8#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}