IconFont图标援用的办法步骤（代码）-

?本篇文章给大家带来的内容是对于IconFont图标援用的办法步骤（代码），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于IconFont图标援用的办法步骤（代码），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

前端开发会时常用到一些图标。当ui妹子给你供给的图标不克不及知足你的需求时，可以在 iconfont.cn 上采集并生成本人的业务图标库，再进行运用。

一、生成图标库代码

第一，搜寻并寻到你需要的图标，将它采集到你的购物车里，在购物车里，你可以将选择的图标增加到项目中（没有的话，创建一个），后续生成

的资源/代码都是以项目为维度的。

二、引入

有三种引入方式供你选中：SVG Symbol、Unicode 及 Font class。我们举荐在现代阅读器下运用 SVG Symbol 方式引入。

SVG Symbol

SVG 符号引入是现代阅读器将来主流的图标引入方式。其办法是预先加载符号，在合适的地方引入并渲染为矢量图形。有如下特色：

1. 支撑多色图标，不再挨到单色图标的限定

2. 通过一些技巧，支撑像字体那样，通过 font-size、color 来调整样式

3. 支撑IE 9+ 及现代阅读器

运用步骤如下：

• 切换到 Symbol 页签，复制项目生成的地址代码：

//at.alicdn.com/t/font_835630_0rudypqb4a.js

• 参加图标样式代码，要是没有特别的请求，你可以直接复用 Ant Design 图标的样式

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
}

• 挑拣响应图标并猎取类名，利用于页面

你也可以通过运用 Ant Design 图标组件供给的 Icon.createFromIconfontCN({...}) 办法来更加利便地运用图标，运用方式如下：

• 配置项目地址，新建图标组件

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js'
});

export default IconFont;

• 之后可以像运用 组件同样利便地运用，支撑配置样式

Unicode

这是最原始的方式，需要三步来完成引入：

• 拷贝项目生成的字体库代码，你可以创建一个样式文件来放置图标相干的样式。

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont') format('svg');
}

• 参加图标样式代码，要是没有特别的请求，你可以直接复用 Ant Design 图标的样式。

.iconfont {
  display: inline-block;
  font-style: normal;
  vertical-align: baseline;
  text-align: center;
  text-transform: none;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
    display: block;
    font-family: "iconfont" !important;  /* 注意与 font-face 中的匹配 */
  }
}

• 在项目中鼠标挪移到要用的图标上，点击『 』，就得到了图标对应的字体编码，此刻可以直接引入了：



Font Class

• 切换到 Font class 页签，在页面头部引入下面生成的 css 代码：

//at.alicdn.com/t/font_835630_0rudypqb4a.css

要是不喜好标签引入的方式，也可以直接拷贝上面链接中的代码到你的样式文件中。要是不喜好网站默许生成的类名，本人重写这局部代码即可，比方：

 - .icon-ali-pay:before { content: "\e66b"; }              // 修改前
 - .monitor-icon-alipay:before { content: "\e66b"; }       // 修改后

• 这时你可以选中拷贝图标对应代码（就是类名，要是类名被重写过，这里记得用修改后的），直接运用：

不外我们更举荐将它封装一下：

import React from 'react';

const BizIcon = (props) => {
  const { type } = props;
  return ;
};
export default BizIcon;

此刻可以更加利便地运用：

Unicode 和 Font Class 本质上就是字体，你可以通过一些字体的样式属性去控制这种图标的展示，同时阅读器兼容性非常不错，但不支撑多色图标。