文档章节

自定义字体图标

youcaihuacube
 youcaihuacube
发布于 2016/12/01 16:57
字数 584
阅读 12
收藏 0
点赞 0
评论 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
苏州
程序员
【翻译】如何创建Ext JS暗黑主题之二

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

tianxiaode2008 ⋅ 2015/07/22 ⋅ 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 ⋅ 0

文字前面的小图标无法和文字正好对齐的问题

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

水牛叔叔 ⋅ 2012/07/03 ⋅ 2

微信正式开源 WeSketch,让开发者更高效使用 Sketch

微信今天正式开源了 WeSketch ,这是一个由微信设计团队打造的 Sketch 插件合集,旨在让设计师和开发者更加高效的使用 Sketch 。 更高效的团队协作,如:UI Kit 同步、色板同步等。 更快捷的...

王练 ⋅ 2017/07/05 ⋅ 12

多功能 Sketch 插件合集--WeSketch

WeSketch 是一个强大的 Sketch 插件合集,由微信设计团队量身打造,旨在让设计师和开发者更佳高效的使用 Sketch 。 更高效的团队协作,如:UI Kit 同步、色板同步等。 更快捷的交互设计,如:...

匿名 ⋅ 2017/07/05 ⋅ 4

解决Android开发中简单图标的困扰,FontIcon在Android中的使用示例

由于实习的公司还有自己的一个项目都对图标有着各种各样的需求,除了个性话的图标以外,我们的项目往往还需要一些简单的图标来显得不是那么单调。但是传统的引用Icon操作起来过于麻烦,需要考...

斯基劳绅士 ⋅ 2015/08/21 ⋅ 2

制作自定义的字体图标

字体图标比图片更加灵活,能够使用字体的方式控制图标的相关样式表现。Bootstrap使用的font awesome囊括了很多常用的图标供我们使用。但有时候这里面的图标并不能满足我们的需求,这时,我们...

挨踢旅行者 ⋅ 2016/05/23 ⋅ 0

layui 2.3.0 发布,重新归来

layui 有段时间没在 OSC 露脸了,以此版本为始,重新进入更新模式,也好混个脸熟。 更新日志: rate 评分 新增的全新组件,用于进行评分/星操作 支持是否开启半星 支持自定义星星个数 支持自...

贤心 ⋅ 05/31 ⋅ 0

切图框架 Slicy 发布 1.3 版本

Slicy 1.3 发布了。该版本最大的变化在于添加了字体图标的支持,基于 CSS3 属性 @font-face 使用自定义字体,这是让前端工程师拍手称赞的一件事情。在 CSS3 之前,前端页面的字体只能使用设备...

qietuwang ⋅ 2016/08/19 ⋅ 2

修改android Toolbar的标题大小和按钮图标颜色

使用android toolbar的时候,toolbar中的标题、二级标题以及按钮的图标的颜色都会使用默认的值。但是,有时候我们必须要自定义它们的大小以及颜色,该如何自定义呢? 解决方法: (1)修改标...

蜗牛搬家 ⋅ 2016/07/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java软件工程师简历中项目经验怎么写?

作者:暗灭 链接:https://www.zhihu.com/question/20695310/answer/180691302 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 直接给你贴个我自己的简历...

颖伙虫 ⋅ 27分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部