如何制作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 8Generate preprocessor variables for: LessUse 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>

原文地址:https://www.cnblogs.com/10manongit/p/12210543.html

时间: 2024-10-04 08:01:41

如何制作icon-font小图标的相关文章

icon font字体图标字库汇总

最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库. fontello http://fontello.com/ 在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的. icomoon http://icomoon.io/app/#/s

Icon glyphs 小图标命名收藏

Icon glyphs 下面展示的140个图标均提供了深灰色(默认)和白色两种颜色.

Unity 制作Load等待小图标

直接上代码: using UnityEngine; using System.Collections; public class LoadRotate : MonoBehaviour { public float speed = 8f; public RotateAxis direction = RotateAxis.z; // Update is called once per frame void Update() { if (RotateAxis.x == direction) { thi

阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)

继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库),还支持自己上传,关键还能生成你项目专用的CDN,速度不言而喻,支持国产.下面引用介绍 转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具) 使用SVG来代替Web Iconfont(图形字体化) 从最开

字体图标 Icon font

Icon font Icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: Icon Font的优缺点 大小可以自由地变化 颜色可以自由地修改 添加阴影效果 *IE6也可以支持 支持一些CSS3对文字的效果 字体文件比图片文件小很多 由于是字体,所以只可以显示纯色图片,不支持多种颜色的图片(缺点) 资源: 阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库. fontello 在线定制

CSS Sprites+CSS3 Icon Font

CSS Sprites+CSS3 Icon Font 先马上等有空一定看看转载于http://www.cnblogs.com/jingwhale/p/4280073.html CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.根据具体图标在大图上的位置,给背景定位. CSS Sprites加速的关键,不是降低质量,而是减少个数. 做成

Web 设计新趋势: 使用 SVG 代替 Web Icon Font

如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法. 这篇文章列举了目前 SVG 比较常见的使用方法. 关于使用 Icon Font 的缺陷,这篇来自 CSS Trick 的 <Inline SVG vs Icon Font> 可谓是总结的相当全面了.在我看来,Icon Font 的主要缺陷有以下几条: 浏览器将其视为文字进行抗锯齿优化,有时得到

Icon Font的优点明显要大于缺点

Icon Font的优点明显要大于缺点,并且有可以使用的空间,因此我们决定使用它之后,就要学会怎么去制作Icon Font 在制作之前我们要知道需要什么工具,其实很简单,只需要FontCreator,PS这两个工具即可. 制作的过程,首先需要我们的设计师给出Icon的矢量图,我们需要在PS中将这个Icon图层栅格化,之后保存为png24,再在FontCreator中通过图片导入到字体中,进行大小的调整(下面会给出字体制作各个值的用处,本人觉得比较重要的就是离左右的宽度以及离baseline的距离

reactjs 项目使用 iconfont 小图标

在 reactjs 项目中是所有小图标目前主要分为两类使用方式,第一类通过 CSS 引入的方式使用,第二类使用 JS 的方式引入使用. 注册-登录-建立项目-选中图标添加到购物车-添加至项目-下载到本地,当然亦能上传制作的自定义小图标.下面正式代码部分. 下载到本地解压后有如下几个文件: 其中第一种 CSS 引入使用的方案需要的文件如下图红线标记: 在如上图中找到 iconfont.css 打开后更改路径(一般如图中所示)在红线标记的位置: 修改完成后保存,一般会项目入口的 CSS 文件中引入这

fontAwesome代替网页icon小图标

引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你也可能经常会看到的,如图所示: 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到.因为它们也可以变为彩色的. 黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧.一般的程序猿,包括前端程序猿