自定义 iconfont 字体图标

css 部分：

# 第一步：使用 font-face 声明字体 
@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

`@font-face` 中的 src 可以根据需求声明单个或者多个，不同类型的字体主要为了应对不同浏览器的支持。如果只有一种 ttf 字体，只声明 ttf 类型即可：`src: url('webfont.ttf') format('truetype');`。

一般字体会与声明字体的 CSS 文件放在同一目录下，以方便加载。
 
# 第二步：定义使用 webfont 的样式 
.web-font {
    font-family: "webfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
.icon-fendi:before {
  content: "\e601";
}
 
# 第三步：为文字加上对应的样式 
<i class="web-font icon-fendi"></i>

字体编辑

使用软件 FontCreator 。

FontCreator破解版 12.0.0.2546 注册版

在线字体转换

fontke

使用 FontCreator 编辑 iconfont 文件

使用 iconfont 字体过程中，会有些修改原有图标图片或者新增字体图标的需求，使用 FontCreator 可以很轻松地完成。

• 打开 iconfont 文件

• 按照代码点排序和展示

菜单栏下方有三个 select 选择框，第一个默认无组合即可，后面两个选择代码点，分别表示按照代码点排序和图标项目头部展示代码点。

这里的代码点即 CSS 中定义的 before 的 content 属性值，比如 content: "\e601"; 对应的代码点即 $E601。

• 修改代码点和图标展示内容

右击图标项目，选择字形属性，修改弹框中的代码点项，点击应用即可。

图标内容可以通过双击或者右键编辑进入到修改页面，Alt + 左键选中目标，按住 Ctrl 保持图形变换长宽比，然后拖动目标边框上的框框进行放大缩小（有点像 PS 里的图形转换）。也可以直接 del 删除原有内容，然后右击导入图像，选择需要加进来的新的图片（一般选择黑色填充的图片），确认即可。

• 保存并替换

默认 Ctrl + s 是保存当前项目，可以选择菜单栏中的文件 -> 导出字体，选择 ttf 或者 woff，或者导出所有类型的字体（如果有需要）。

将保存后的字体替换项目中的字体即可。一般 web 端需要清除缓存之后，才能看到效果。如果新增了图标项目想要使用，需要在对应的字体声明 CSS 中声明新的图标项目对应的图标类（content 值与代码点对应）：

.icon-fendi:before {
  content: "\e601";
}

使用新定义的类，参考上面 CSS 部分二、三步。