自定义字体图标

摘要: web前端使用自定义字体图标的方法

使用illustrator创建svg图标

创建好的示例如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<rect x="51.61" y="41.215" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="112.202" height="36.87"/>
<rect x="95.907" y="49.703" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="22.546" height="133.687"/>
</svg>

将代码复制到记事本中，文件名存为ab.svg

进入IconMoon网站：https://icomoon.io/app/#/select

选择Import Icons导入自己写的svg文件，可以批量或者单条导入

导入完后点击Generate Font按钮，生成了字体文件

最后点击Download按钮，将生成的字体文件下载到本地

下载的文件中有详细的示例

下面是使用：

新建外联样式表，内容如下：

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

.icon-ab:before {
font-family: 'icomoon' !important;
content: "\e900";
}

样式说明：

font-family是自定义的字体名称，可以命名，但是不能和已有字体重复。在下面使用样式的时候需要指定元素用的字体，如果不指定会默认使用其它字体包，对应出来的结果会出错。

content是该字体的编码，此处为十六进制编码。编码的对应关系到生成的字体包中svg文件打开查看

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode=" " horiz-adv-x="512" d="" />
<glyph unicode="" glyph-name="ab" d="M264.243 748.979h574.474v-188.774h-574.474v188.774zM491.044 705.521h115.436v-684.477h-115.436v684.477z" />
</font></defs></svg>

如上面的代码，&#;表示unicode字符，x开头的表示为十六进制，e900是这个字在这个字体包中十六进制编码。所以上面的content只要显示这个编码就能出来相迎的字体了。

在引入该样式的html文件中直接加icon-ab即可显示出自定义的图标

<span class="icon-ab"></span>