如何制作icon-font小图标
1、首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标(选择格式为SNG
格式)。
2、打开iconmoon这个网站(这个样子的),然后点击右上角那个Iconfont App
如下图:
3、上面有一个紫色的 Import Icons
点击上传你下好的 SVG
图标。
4、上传好的 SVG
图标会显示在下方的 Untitled Set
中,然后选择上方有个类似 笔
形状的图标,点击进入编辑。解释一下上面的选择器。。鼠标箭头
表示 选择图标
。垃圾桶
表示 删除图标
,一般选择垃圾桶, 点一下图标就可删除
。十字箭头
表示 变换位置
5、在编辑中,第一个 Tags
是表示你要查找这个图标时可以输入的名字,第二个框输入的是待会引用代码时会用到的 名字
。我创建了花,所以就命名为 flower
,然后关闭编辑器,千万别点下载。
6、然后点击右下方的 Generate Font F
,进入后是这个页面,然后点击红圈中的齿轮,进行下一步编辑
7、进入编辑后,需要修改以下内容。
8、Font Name
表示一会儿引入字体需要引入的 样式名称
Class Prefix
表示引入样式的前缀名,如不设置后缀的话,引入的样式名称为 icon-flower
9、选择 Support IE 8
和 Generate preprocessor variables for: Less
和Use a class
然后后面这个框内填写css需要引入的类名
,我就写了 .wyhicon
这个名称
10、然后关闭编辑,点击右下角download下载
这个字体。
11、下载完毕后,压解。修改style.css
中的内容
/* 我们需将下面的url路径改为引用的fonts文件夹的路径,根据实际情况修改 */
@font-face {
font-family: 'wyhicon';
src: url('../fonts/wyhicon.eot?q06q0o');
src: url('../fonts/wyhicon.eot?q06q0o#iefix') format('embedded-opentype'),
url('../fonts/wyhicon.ttf?q06q0o') format('truetype'),
url('../fonts/wyhicon.woff?q06q0o') format('woff'),
url('../fonts/wyhicon.svg?q06q0o#wyhicon') format('svg');
...
}
/* 下方这个类中的字体样式需要加上以下代码中的font-family */
.wyhicon {
font-family: 'wyhicon',PingFangSC-Light,'helvetica neue','hiragino sans gb',arial,'microsoft yahei ui','microsoft yahei',simsun,sans-serif !important;
...
}
.icon-flower:before {
content: "\e900";
}
也就是在原来的
style.css样式
下的.wyhicon
下加一条font-family:
'wyhicon',PingFangSC-Light,'helvetica neue','hiragino sans
gb',arial,'microsoft yahei ui','microsoft yahei',simsun,sans-serif
!important;
11、然后在你的html文档中引用就可以了
<!-- 首先引用你的css样式 -->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<!-- 然后引入你的字体文件就ok了 -->
<i class=" wyhicon icon-flower"></i>
如何制作icon-font小图标的更多相关文章
- 快速上手制作Icon Font
现在在提起Icon Font,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作Icon Font的整个流程整理一下,并且加入了自己在制作中遇到的问题, ...
- icon font字体图标字库汇总
最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...
- CDR快速制作苹果手机照片小图标
本篇教程用CorelDRAW快速制作苹果手机照片小图标,在实现的过程中主要使用了旋转复制的方法,加之一些常用工具的用法处理,最后加上透明效果下的合并模式就好了,现在跟小编一起来看看详细的操作吧! 1. ...
- Unity制作人物头像小图标和小地图
人物头像的制作: 在场景中添加人物模型和环境模型 设置人物的layer为Player 在主摄像机的基础上,新建一个次摄像机并将摄像机镜头对准人物面部,调整至合适大小. 设置次摄像机 culling m ...
- 把UI图里的小图标制作成icon font
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...
- 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)
继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...
- 字体图标 icon font
Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- Web 设计新趋势: 使用 SVG 代替 Web Icon Font
如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...
- reactjs 项目使用 iconfont 小图标以及使用带颜色 inconfont 小图标
在 reactjs 项目中是所有小图标目前主要分为两类使用方式,第一类通过 CSS 引入的方式使用,第二类使用 JS 的方式引入使用. 注册-登录-建立项目-选中图标添加到购物车-添加至项目-下载到本 ...
随机推荐
- Qt:QJsonObject
0.说明 QJsonObject在逻辑上就是一个Map或Dict!记住这一点对理解它的方法.说明很有帮助. QJsonObject类封装了JSON Object. JSON Object是一个Key- ...
- Markdown语法浅学
typora语法使用 1.字体 *斜体*,_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ <u>下划线</u> ***分割线 , --- 2.标题 # 一级标题 ...
- VS Code远程链接报错Could not establish connection to “hz.matpool.com”
VS Code远程链接报错Could not establish connection to "hz-t2.matpool.com" 输出的部分内容 安装Git git for w ...
- 【战略】以色列公司的数据驱动tip
Eric Rapps:我们的团队获得了大量的收入,并且持续保持着增长.如果获得我们的投资,实际上是你是获得了和相关领域技术积累.专家沟通的支持.但更重要的是,你可以近距离地接触我们的运营资源,您可以直 ...
- ffmpeg修改视频文件的分辨率
在本文中,我们将展示如何调整任何视频文件的大小. 这种方法是在Linux系统(几乎任何发行版)中调整视频文件大小的最佳方法之一,也是Windows和Mac用户的绝佳替代方案. 更改视频文件的分辨率将是 ...
- info sharp Are you trying to install as a root or sudo user? Try again with the --unsafe-perm flag
执行 npm install 编译出错,提示 ERR! sharp EACCES: permission denied, mkdir '/root/.npm' info sharp Are you t ...
- Linux 环境下安装 Nexus 私服存储库
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.nexus私服存储库简介 Nexus 是一个强大的maven仓库管理器,它极大地简化了本地内部仓库的维护和外部仓库的访问.,还可以用来创建yum ...
- Kettle错误记录之couldn't open file XXX
业务背景: 简单的TXT文件入库逻辑 组件: 文件文本输入,表输出 具体BUG: 这里报错是无法打开文件,在我尝试了多个思路后,最终发现了问题所在. 因为使用的txt文件的格式是Unix的,而我的文本 ...
- 部署 Nginx +uwsgi+centos7+django+supervisor 项目
部署CRM项目 前言 使用软件 nginx 使用nginx是为了它的反向代理功能,项目会通过Django+uWSGI+Nginx进行服务器线上部署. uWSGI python web服务器开发使用WS ...
- RabbitMQ Go客户端教程3——发布/订阅
本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第三篇--发布/订阅. 这些教程涵盖了使用RabbitMQ创建消息传递 ...