文档章节

制作自定义的字体图标

挨踢旅行者
 挨踢旅行者
发布于 2016/05/23 17:09
字数 471
阅读 68
收藏 1
点赞 2
评论 0

字体图标比图片更加灵活,能够使用字体的方式控制图标的相关样式表现。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
手摸手,带你优雅的使用 icon

前言 本篇文章其实陆陆续续写了快半年,主体部分写好了很久了,但由于种种原因一直没有发布。 首先来说说写这篇文章的主要初衷是:在做前端后台项目的时候经常会用到很多 icon 图标,刚开始还...

花裤衩coder
2017/11/29
0
0
【教程】简单几步把LOGO变字体

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

曾沙
2013/07/17
0
29
介绍一个Android的开源的自定义小控件:TextDrawable

TextDrawable在Github的地址:https://github.com/devunwired/textdrawable 项目作者介绍这个小控件的博客:http://wiresareobsolete.com/wordpress/2012/12/textdrawable-draw-some-text/ ......

李海珍
2013/04/13
0
0
HTML5-定制音频播放器-audio

先看看效果---》[传送门][1]《---,如果感觉没什么大不了的就可以绕道了(==) HTML结构其实很简单,不要在意那个音频的地址。首先是audio标签,是我们这个小东西的核心。其主要的属性可以点...

limichange
2013/05/24
0
1
视网膜New iPad与普通分辨率iPad页面的兼容处理

一、这是篇经验分享 就算不是果粉也应该知道,iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”,其设备分辨比(之前有详细介绍,点击这里查看)是...

大雄小熊
2014/01/21
0
0
React全家桶构建一款Web音乐App实战

上一节使用create-react-app脚手架搭建了基本项目骨架,这一节继续制作项目需要的字体图标和页面主路由的搭建 字体图标制作 为什么要使用字体图标? 图标放大或缩小不会被拉伸,会保持足够的...

sinat_17775997
2017/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
14分钟前
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
16分钟前
0
0
003. es6数值的扩展

一、普通扩展 Number 方法,将字符串、数值转为十进制 : Number('0b111') Number.isFinite() 用来检查一个数值是否为有限的:Number.isFinite(15) Number.isNan() 用来检查一个值是否为NaN N...

秋季长青
30分钟前
0
0
rabbitmq学习(二)

基本队列:Producer直接发送信息到Queue中,Consumer接收Queue发送过来的信息 简而言之,一个生产者发送信息,一个消费者接收信息。 获取连接工具类: package com.example.demo.utils;i...

人觉非常君
35分钟前
0
0
C语言数组和指针的语法糖

对于C语言,我可以这样秀:比如当创建一个数组arr[n]之后,一般我们去遍历数组的时候是for (int i = 0; i < n; i++) { a[i]; }但是我知道下表访问符[]是个语法糖,也就是说a[i]在编译器看来是...

ustbgaofan
39分钟前
0
0
Call to undefined function bcmath()的解决方法

乐意黎的ECS主机环境,Centos7.2 + PHP7 由于使用了bcdiv()函数,运行时总在抛错。 Fatal error: Call to undefined function bcmath() in /usr/loca/apache/htdocs/... on line 4 一查得知:......

dragon_tech
44分钟前
0
0
css优先级

..

architect刘源源
49分钟前
0
0
【转】Twitter的分布式自增ID算法snowflake

结构 snowflake的结构如下(每部分用-分开): 0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 000000000000 第一位为未使用,接下来的41位为毫秒级时间(41位的长度可以...

talen
53分钟前
0
0
hive支持行级修改

Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置。要想支持行级insert、update、delete,需要配置Hive支持事务。 一、Hive具有ACID语义事务的使用场景 1. 流式...

hblt-j
59分钟前
0
0
Python---scrapy框架的学习

scrapy框架的学习 先熟悉下scrapy项目结构: scrapyTest/scrapyTest/ _init_.py用来初始化项目信息 scrapyTest/scrapyTest/ items.py文件为爬虫项目的数据容器文件,主要用来定义我们的数据....

android-key
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部