自定义字体图标
自定义字体图标
youcaihuacube 发表于1年前
自定义字体图标
  • 发表于 1年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 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="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" 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>

 

共有 人打赏支持
粉丝 0
博文 2
码字总数 854
×
youcaihuacube
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: