文档章节

自定义字体图标

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等)。 自动生成预览...

同一种调调
09/17
0
0
认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

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

dkvirus
2017/10/22
0
0
【翻译】如何创建Ext JS暗黑主题之二

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

tianxiaode2008
2015/07/22
0
0
小程序tabbar这套方案全搞定!

关于微信小程序的tarbar,相信你们都不会陌生 在实现小程序微信原装的tabbar却比较呆板,不够精致,往往不符合自己的要求 这个时候怎么办呢 这套方案接着! 先简单的来说一下主要思想: 自定义...

HappyBirdwe
10/30
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

没有更多内容

加载失败,请刷新页面

加载更多

在Flutter中嵌入Native组件的解决方案

摘要: 引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择。本文希望向大家介绍AndroidView的使用方式以及在此...

阿里云官方博客
38分钟前
1
0
aws S3 util demo

package com.example.demo;import com.amazonaws.AmazonClientException;import com.amazonaws.AmazonServiceException;import com.amazonaws.auth.BasicAWSCredentials;import co......

经常把天聊死的胖子
57分钟前
4
0
linux下查看cpu、memo、io、swap性能数据脚本

直接贴脚本: 1、cpu #!/bin/bashCurrentDate=`date -d today '+%Y%m%d'`CurrentTime=`date -d today '+%Y%m%d%H%M'`mytext="$CurrentTime\t`top -b -n 1 | grep Cpu\(s\......

郑加威
今天
5
0
MySQL之——查询重复记录、删除重复记录方法大全

MySQL之——查询重复记录、删除重复记录方法大全

安小乐
今天
2
0
spring容器启动,停止,关闭事件监听-ApplicationEvent

ApplicationEvent ApplicationEvent相当于一个事件,所有自定义事件都需要继承这个抽象类。在Eclipse中Ctrl+Shift+H调用类的层次结构列表,可以看到如下 Application下抽象子类ApplicationCo...

tantexian
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部