文档章节

自定义字体图标

youcaihuacube
 youcaihuacube
发布于 2016/12/01 16:57
字数 584
阅读 58
收藏 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
苏州
程序员
私信 提问
加载中
请先登录后再评论。
【opencv】图形的绘制

1.矩形图像的绘制: 原函数:void cvRectangle(CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8,int shift=0) img就是需要绘制的图像 pt1 and pt......

其实我是兔子
2014/10/08
1.2K
1
桌面即时贴软件--GloboNote

GloboNote 是一个桌面记事软件,可帮你创建待办事宜、提醒和其他笔记信息。无限制即时贴的数量,可分组整理,支持搜索,可定制文本的显示格式(字体、颜色和大小),可将某个即时贴始终显示在...

匿名
2013/01/21
6.8K
1
HTTPS切换工具--HttpsSwitcher

HttpsSwitcher 是一个帮你进行 HTTPS 切换的 Chrome 插件,本工具可以帮你尝试使用https打开指定的域名,点击本插件的浏览器图标后会自动切换本标 签页的http/https状态,并且会记住你的选择...

leehorsley
2013/01/26
1K
0
DAAttributedStringUtils

DAAttributedStringUtils 包含 NSAttributedStrings 的一些常用方法,包括: 使用类 printf 的格式化方法创建 NSAttributedString 实例 一个简单的 UI Label 类用来显示 NSAttributedString...

匿名
2013/02/18
231
0
响应式框架--Groundwork

GroundworkCSS 是一个基于 Sass 预处理器的开源项目 ,主要用于快速构建响应式 Web 应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。 Groundwork 还提供多种 ...

匿名
2013/02/25
2.8W
4

没有更多内容

加载失败,请刷新页面

加载更多

如何在Vue中使用更复杂的插槽

Vue.js是一个易于使用的Web应用程序框架,可用于开发交互式前端应用程序。 在本文中,我将介绍命名插槽和作用域插槽。 命名插槽 有时我们的模板中会有多个插槽。为了区分每个插槽,我们必须给...

前端知否
03/28
0
0
AutoUpdater迁移到Github

一. 摘要   最近一两年在做跨平台的解决方案,使应用程序能支持Android, iOS, Windows, MacOs. Linux等操作系统,在Android, iOS上可以使用Google Play Store 和 Apple App Store 只带的自...

osc_r2ntyjuu
14分钟前
0
0
42. Photo Tourism:三维重建和图像渲染结合的典范

本文同步发表在我的微信公众号和知乎专栏“计算摄影学”,欢迎扫码关注, 一. 从PhotoSynth谢幕讲起 2017年2月6日,微软正式关闭了PhotoSynth的网站和相关服务。这可能是世界上第一个3D图像创...

WangHawk
05/28
0
0
VARCHART XGantt入门教程

甘特图(Xgantt)从1998年的第一个商用版本开始就致力于计划编制和项目管理方面控件的研究和开发,经过20多年的积累和沉淀,目前可为软件开发商和最终用户提供最顶级的计划编制和项目管理的控...

roffey
15分钟前
0
0
.NET 跨平台框架Avalonia UI: 填坑指北(一):熟悉UI操作

Avalonia 是一个跨平台的 .NET UI 框架,支持 Windows、Linux、Mac OSX... (以及Android IOS soon..) 本篇主要介绍Avalonia开发过程和Linux适配环节的几个疑难点.. avalonia for vs安装和.de...

osc_o9qsdhyv
15分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部