文档章节

制作自定义的字体图标

挨踢旅行者
 挨踢旅行者
发布于 2016/05/23 17:09
字数 471
阅读 69
收藏 1

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

假如有一张你喜欢的图标,想通过字体的方式控制它在页面的表现,你需要按照如下方法做:

1. 你需要把该图标转换为svg格式,至于如何转换,身为ps渣的我也不会,自行百度,也可参考以下网址的方法:http://jingyan.baidu.com/article/9158e000342ba6a25412281f.html?qq-pf-to=pcqq.c2c。这里我拿一个现成的svg图标做示例,就是开源中国首页的logo图标。把它下载下来之后,需要先按照你需要的尺寸修剪。ps好像不能处理svg格式图片,我们可以使用在线的方式来处理。你需要访问如下网址:http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Feditor.method.ac%2F&h=2000&c=&n=,这个工具也可以把普通格式(*.png, *.jpg等)的矢量图转换为svg格式。最后生成的svg格式图片(oschina.svg)如下:

2. 在线访问如下网址:https://icomoon.io/app/#/select,如下图所示,点击Import Icons按钮,上传oschina.svg,选中上传的图片之后再点击最下面的Generate Fonts按钮,跳转到另一个页面。

3. 跳转到新的页面之后,你可以对图标进行其它的相关设置如重命名等操作,然后点击Download按钮下载即可。

4. 下载完成后,解压缩文件,fonts文件夹中的四个文件(*.eot, *.svg, *.ttf, *.woff)就是字体图标需要的四个文件。(下载的文件中有相关示例)

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
挨踢旅行者
粉丝 2
博文 20
码字总数 20739
作品 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
【翻译】如何创建Ext JS暗黑主题之二

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

tianxiaode2008
2015/07/22
0
0
深度操作系统 15.4 RC 发布

深度操作系统是一个致力于为全球用户提供美观易用、安全可靠的Linux发行版。 经过深度操作系统15.4 Beta的公测,收到了大家很多的建议和问题反馈,我们也采纳了很多大家的建议以及修复了很多...

李玉珏
2017/03/24
3.3K
43
Android多分辨率适配实践【1】使用字体图标(内含两枚神器)

目录 Android多分辨率适配实践【0】基础适配篇(撰写中) Android多分辨率适配实践【1】使用字体图标,精准控制不同分辨率的图标样式(内含两枚神器) Android多分辨率适配实践【2】Iconify...

刘星石
2016/03/02
45
0
【教程】简单几步把LOGO变字体

今天学到一招,所以决定简单写写如何利用图标字体生成器IcoMoon把自己制作的图标变成字体,下面以OSChina的图标为例。 一、确保logo转成纯色,并保存为svg格式 因为OSC的logo是绿色带描边的,...

曾沙
2013/07/17
0
29

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部