文档章节

自定义字体图标

youcaihuacube
 youcaihuacube
发布于 2016/12/01 16:57
字数 584
阅读 13
收藏 0

使用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>

 

© 著作权归作者所有

共有 人打赏支持
youcaihuacube
粉丝 0
博文 2
码字总数 854
作品 0
苏州
程序员
字体生成器 - svgtofont

读取一组SVG图标并从SVG图标输出 TTF/EOT/WOFF/WOFF2/SVG 字体,字体生成器。 特征: 支持的字体格式:WOFF2,WOFF,EOT,TTF和SVG。 允许使用自定义模板(例如css,less等)。 自动生成预览...

同一种调调
前天
0
0
【翻译】如何创建Ext JS暗黑主题之二

原文:How to Create a Dark Ext JS Theme– Part 2 我已经展示了如何去开发一个精致的暗黑主题,看起来就像Spotify。在本文的第一部分,了解了Fashion、Sencha Inspector、主题和变量。在第...

tianxiaode2008
2015/07/22
0
0
Android开发中iconify的使用

一、iconify简介 iconify的github地址:https://github.com/JoanZapata/android-iconify 项目地址:http://joanzapata.com/android-iconify 教程地址:http://blog.joanzapata.com/iconify-......

紫韵
2016/03/05
307
0
认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

在看别人 github 项目的时候,看到了 iconfont,百度了一下是阿里的图标库,这个很容易理解,但是自己操作一遍之后发现下载下来的目录还包含了 .eot、.woff 等文件,对于这些新东西感到有些陌...

dkvirus
2017/10/22
0
0
文字前面的小图标无法和文字正好对齐的问题

在做页面时,有很多时候要在一行文字前加个小图标,很多情况下,小图标的中点并不会很好的和文字的中轴对齐。我这几天就遇到这样的情况,弄了好久,参考了别人很多代码都不能完美解决。偶然间...

水牛叔叔
2012/07/03
0
2

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 使用parent方式引用时 获取值属性方式默认@

采用官网提供的 引入依赖时,application.properties中的值变量,无法通过${}获取,这是由于Spring Boot 已经将字符方式调整为 <resource.delimiter>@</resource.delimiter>。故如果在,工程中...

翱翔fly
12分钟前
1
0
HTTPS证书验证流程及SSL证书生成步骤【附nginx开启https配置】

------------------------------------------------------------ HTTPS证书验证流程(极简化版) 1.客户端向服务端请求证书(server.crt) 2.服务端下发证书(server.crt) 3.客户端用预制的...

xiaomin0322
13分钟前
1
0
预编译sql语句和参数化sql能有效防止——sql注入攻击——

预编译和参数化处理sql原理类似: 参数化处理sql 是将参数进行了字符串化处理,把参数中的单引号,井号#,等都做了转义处理,进而在执行sql语句时不会被当做sql中的定界符和指定符来执行。 ...

fang_faye
14分钟前
1
0
springboot最全配置解释

​​​​​​​# ----------------------------------------# 核心属性# ----------------------------------------# 文件编码banner.charset= UTF-8# 文件位置banner.locati...

废柴大叔
15分钟前
57
1
(大致了解下)从单机到2000万QPS: 知乎Redis平台发展与演进之路

导读:知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动化运维服务体系,提供很多强大的功能。本文作者是是该系统的负责人,文...

Ocean_K
22分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部