文档章节

制作自定义的字体图标

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

字体图标比图片更加灵活,能够使用字体的方式控制图标的相关样式表现。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
【教程】简单几步把LOGO变字体

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

曾沙
2013/07/17
0
29
Android多分辨率适配实践【1】使用字体图标(内含两枚神器)

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

刘星石
2016/03/02
45
0
深度操作系统 15.4 RC 发布

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

李玉珏
2017/03/24
3.4K
43

没有更多内容

加载失败,请刷新页面

加载更多

【Flutter教程】从零构建电商应用(一)

在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个Flutter应用,并学习Flu...

笔阁
13分钟前
1
0
什么是以太坊DAO?(三)

Decentralized Autonomous Organization,简称DAO,以太坊中重要的概念。一般翻译为去中心化的自治组织。 投票支付合约的所有费用和行动需要时间,并要求用户始终保持活跃,知情和专注。另一...

geek12345
15分钟前
0
0
一个本科学生对Linux的认知

一个本科学生对Linux的认知 我是一名大三的普通一本大学的软件工程的一名学生,学校开设了一些关于系统开发的课程,纸上得来终觉浅,学校的课程课时较短,想要在56个课时之内学会一些公司需要...

linuxCool
57分钟前
2
0
CentOS 安装Tomcat

Tomcat 介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Java 程序写的网站用tomcat+jdk来运...

野雪球
今天
1
0
OSChina 周四乱弹 —— 每天都迟到是种什么样的体验

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席机器人 :《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 ...

小小编辑
今天
709
12

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部