如何制作icon-font小图标

bigdevil_s 发布于2019-08-29 13:21 / 1312人阅读

摘要：首先可以去阿里巴巴矢量字体库中下载你想要的图标选择格式为格式。打开这个网站这个样子的，然后点击右上角那个如下图上面有一个紫色的点击上传你下好的图标。鼠标箭头表示选择图标。垃圾桶表示删除图标，一般选择垃圾桶，点一下图标就可删除。

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文档中引用就可以了

GPU云服务器云服务器如何小程序制作如何制作小程序小程序如何制作小程序如何制作的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112548.html

如何制作icon-font小图标

摘要：首先可以去阿里巴巴矢量字体库中下载你想要的图标选择格式为格式。打开这个网站这个样子的，然后点击右上角那个如下图上面有一个紫色的点击上传你下好的图标。鼠标箭头表示选择图标。垃圾桶表示删除图标，一般选择垃圾桶，点一下图标就可删除。 1、首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标（选择格式为SNG格式）。 2、打开iconmoon这个网站（这个样子的），然后点击右上...

yexiaobai 2019-08-01 17:32 评论0 收藏0
[盘点]项目中可以怎么优化图片

摘要：雪碧图雪碧图就是把很多小的图整合到一起，制作成一张比较大的图，然后作为元素的背景图片使用，定位到相应的图片即可。除此之外，使用雪碧图，有两个个注意地方不要把页面所有的图片都合并，比如把整合会破坏的语义结构。看似平常的事物，往往会蕴含的巨大的智慧。把看似平常的事物简单做好，可能很正常。如果能把平常的事物做精，做细，这个不平常。 1.前言每一个开发者在开发项目中，不可避免要和图片打交道...

lykops 2019-08-23 13:41 评论0 收藏0
[盘点]项目中可以怎么优化图片

摘要：雪碧图雪碧图就是把很多小的图整合到一起，制作成一张比较大的图，然后作为元素的背景图片使用，定位到相应的图片即可。除此之外，使用雪碧图，有两个个注意地方不要把页面所有的图片都合并，比如把整合会破坏的语义结构。看似平常的事物，往往会蕴含的巨大的智慧。把看似平常的事物简单做好，可能很正常。如果能把平常的事物做精，做细，这个不平常。 1.前言每一个开发者在开发项目中，不可避免要和图片打交道...

hedzr 2019-08-02 12:07 评论0 收藏0
制作生成icon-font步骤

摘要：制作生成步骤准备好图标的文件进入在网页的右上角找到的按钮，点击进入进入之后，将之前准备的的文件在左上角的按钮上传上传之后在顶部菜单选项中点击笔样子的按钮，再点击上传的图标就能够对其进行修改在修改的界面会有两个输入框一个是用来在当前页面展示制作生成icon-font步骤准备好图标的SVG文件进入icomoon 在网页的右上角找到 IcoMoon App 的按钮，点击进入进入之...

Jrain 2019-08-30 15:52 评论0 收藏0
制作生成icon-font步骤

摘要：制作生成步骤准备好图标的文件进入在网页的右上角找到的按钮，点击进入进入之后，将之前准备的的文件在左上角的按钮上传上传之后在顶部菜单选项中点击笔样子的按钮，再点击上传的图标就能够对其进行修改在修改的界面会有两个输入框一个是用来在当前页面展示制作生成icon-font步骤准备好图标的SVG文件进入icomoon 在网页的右上角找到 IcoMoon App 的按钮，点击进入进入之...

wqj97 2019-08-01 16:19 评论0 收藏0