图标字体制作

前言

对于前端开发者来说，学习图标字体的制作的非常有必要的。

敲黑板：推荐使用第二种方式（使用 Iconfont 制作字体图标）

使用图标字体的优点

• 减少图片的请求，加快网页访问速度
• 页面放大时，字体图片不失真
• 可随意修改颜色及大小
• 加快开发速度

制作图标字体

一、使用 IcoMoon 制作字体图标

在讲字体图标制作之前先来讲讲自定义图标吧！

1.自定义图标

• 访问 IcoMoon，可以看到里面有很多现成的图标。

• 如果你需要的图标这里都有，可以选择你所需要的图标，然后点击Generate Font，如图：

  
  自定义图标.png
• 这时候会下载一个字体图标文件，这个文件的具体使用方法看下文---字体图标的使用。

2.制作字体图标

• 要制作字体图标，首先你得有svg格式的图标。（svg图片可使用AI制作）

  
  down.svg

• 点击IcoMoon页面中的Import Icons 按钮导入你的svg图标（导入结果如下图）

  
  Import Icons

• 选择你所需要的字体图标 点击Generate Font

  
  操作步骤

• 点击Generate Font按钮之后会出现另外一个界面，此界面可以修改你的图标的名称，编码，以及查看对应的代码书写方法。
  最后点击download下载字体图标文件（建议一开始的svg图片就修改好名称）

  
  image.png

二、字体图标的使用

下载之后的文件夹包含demo-files，fonts，demo.html，Read Me.txt，selection.json，style.css
其中fonts，demo.html，style.css是我们需要用到的文件

1. 将fonts文件夹添加到我们的项目中。（如果项目中已经有fonts则把fonts文件夹中的文件拷贝到fonts里面）

• 将style.css文件添加到项目中，并在对应的html文件中引入style.css。

• demo.html可查看字体图标对应的class名称（相当于一个图标查看文档，非常方便快捷）

  
  icon name
• 在使用图标时，只需在html语句中添加对应的class name即可

<span class="icon-down"></span>

注意：如果你的fonts文件夹的名称不为fonts的话，你需修改style.css中@font-face中的文件路径。

---

另外，字体图标也可以使用Studio制作，这种方法相对来说比较麻烦，这里就不过多介绍，有兴趣的小伙伴可以去了解一下。

---

----------------------------------添加于2017.9.14-------------------------------------

使用 Iconfont 制作字体图标（推荐）

Iconfont

优势：

• Iconfont更加有利于团队开发。
• 并且对于字体图标后期的添加，修改等也更加的方便。
• 支持多色图标（symbol方式）

Iconfont的具体使用方法官网中给出了详细的流程，动态图等。
此处便不多做介绍~~~

By : Yimi-shan