制作生成icon-font步骤

wqj97 发布于2019-08-01 16:19 / 1010人阅读

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

制作生成icon-font步骤

准备好图标的SVG文件

进入icomoon

在网页的右上角找到 IcoMoon App 的按钮，点击进入

进入之后，将之前准备的Icon的SVG文件在左上角的 Import Icons 按钮上传

上传之后在顶部菜单选项中点击笔样子的按钮，再点击上传的图标就能够对其进行修改;

在修改的界面会有两个输入框一个是 Tags (用来在当前页面展示和搜索的)，另一个是 Names (用来命名你的这个图标的，也就是下载之后样式表之中真正使用的)

完成所有图标的设置之后，页面下方有三个按钮，点击 Generate Font

这里就是展示刚才设置的图标信息，检查对比之后如果没有问题，就点击页面下方的刚才点击的那个菜单下方的 Download 侧边的一个齿轮按钮进行最后的设置

Font Name 设置你喜欢的名称，这个会作为IconFont字体的名字 zzwicon

Class Prefix 这个会成为字体类的前缀 icon-

多选框选择 Support IE8 和 Generate preprocessor variables for: less

CSS Selector 单选框选择 Use a class 并在输入框中输入一个类名 .zzwicon

其余设置按照自己喜欢的来设置，关闭设置弹窗，点击 Download 下载

将下载文件解压，使用其中的 style.css 文件，以及 fonts 文件夹

在 style.css 文件中需要修改一些东西

   /* 我们需将下面的url路径改为引用的fonts文件夹的路径，根据实际情况修改 */
   @font-face {
   font-family: "zzwicon";
     src:  url("fonts/zzwicon.eot?q06q0o");
     src:  url("fonts/zzwicon.eot?q06q0o#iefix") format("embedded-opentype"),
         url("fonts/zzwicon.ttf?q06q0o") format("truetype"),
         url("fonts/zzwicon.woff?q06q0o") format("woff"),
         url("fonts/zzwicon.svg?q06q0o#nbulicon") format("svg");
     ...
   }
   /* 下方这个类中的字体样式需要加上以下代码中的font-family */
   .zzwicon {
     font-family: "zzwicon",PingFangSC-Light,"helvetica neue","hiragino sans gb",arial,"microsoft yahei ui","microsoft yahei",simsun,sans-serif !important;
     ...
   }
   .icon-msg:before {
      content: "e900";
   }

然后就可以拿来用啦

// 首先需要引入

// 然后可以在你需要用的地方使用上刚才的那些类名

云服务器 GPU云服务器网页制作步骤制作表格的步骤在线制作表情包生成器配置步骤

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

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

制作生成icon-font步骤

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

Jrain 2019-08-30 15:52 评论0 收藏0
如何制作icon-font小图标

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

yexiaobai 2019-08-01 17:32 评论0 收藏0
如何制作icon-font小图标

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

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

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

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

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

hedzr 2019-08-02 12:07 评论0 收藏0