iconfont-阿里图标库 的使用

目录

前言

一、在线链接

二、下载至本地

1、处理下载的文件

2、使用 Font class

三、 上传图标至项目

四、问题踩坑记

1、iconfont的图标使用的时候怎么调整大小？

2、iconfont的图标使用的时候怎么指定颜色？

3、采用的是下载至本地方案，在合并代码时遇到了 iconfont 相关文件冲突时怎么办？

---

前言

 iconfont-阿里图标库：iconfont-阿里巴巴矢量图标库

单个使用 iconfont 就不说了，  iconfont 的官方使用说明 中已经说明了。

看了官网给的使用说明，主要是内容如下：

• Web 端使用
  • icon 单个使用
  • unicode 引用
  • font-class 引用
  • symbol 引用
• Android 使用
• iOS 使用

除了以上基本的使用 iconfont 的方式之外，还可以像下面这样使用 iconfont。

一、在线链接

 以 Unicode 为例：

在 unicode 下，每个 icon 都有一个 unicode 编码，下面以 unicode 编码为`3 `的 icon 为例进行说明。

选择查看在线链接，然后复制在线生成的代码，比如下面是我复制的代码：

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

将此代码放进一个全局的样式文件中，比如 iconfont.less 文件：

// iconfont.less 文件
​
@font-face {
  font-family: 'iconfont';  /* project id xxx */
  src: url('//at.alicdn.com/t/font_2026649_mktdfwuze6.eot');
  src: url('//at.alicdn.com/t/font_2026649_mktdfwuze6.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2026649_mktdfwuze6.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2026649_mktdfwuze6.woff') format('woff'),
  url('//at.alicdn.com/t/font_2026649_mktdfwuze6.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2026649_mktdfwuze6.svg#iconfont') format('svg');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

在页面中使用的时候：

<i class="iconfont">&#x33;</i>

若在线 icon 有更新，需要“选择查看在线链接”，然后复制在线生成的代码，在项目中的 iconfont.less 文件中将最新的代码替换就好了。

请看一看 iconfont 的官方使用说明。

二、下载至本地

在 unicode 下，点击 “下载至本地”。 

1、处理下载的文件

参考 "在线链接" 处生成的文件链接，例如：

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

在生成的链接的url里，找到资源的扩展名，如：.eot、.ttf、.svg等，记为 资源的扩展名。

将下载的压缩文件解压并打开该 iconfont 文件夹，里面会有一些文件，如下图：

将于资源的扩展名不符合的文件删除，然后将处理后的 iconfont 文件夹整个放入到你开发的项目的静态资源目录下（一般是public或是assets文件夹下）。

处理后，该文件夹的文件还剩：

以 assets 文件夹为例，书写 iconfont.less 文件（我的项目里用的是 less）：

//  iconfont.less 文件

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

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    &.small {
        font-size: 12px;
    }
    &.big {
        font-size: 18px;
    }
}

2、使用 Font class

“下载至本地” 和 “Font class” 更配哦。

在 iconfont 文件夹里，我们可以看到有一个 iconfont.json 的配置文件，该文件配置了已添加的所有 icon，并且已经生成了各自的 unicode 编码。

于是，我们可以在  iconfont.less 文件中使用 iconfont.json 的配置文件里提供的 unicode 编码，来自定义 font class 类型。

举个例子：

// iconfont.json 文件

{
  "id": "xxx",
  "name": "myDemo",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "21556977",
      "name": "编辑",
      "font_class": "bianji",
      "unicode": "e7c1",
      "unicode_decimal": 59077
    }
  ]
}

// iconfont.less 文件

// ...（此处为上面已写的代码）

.edit_icon:before {
    content: "\e7c1";
}

在页面中使用的时候：

<i class="iconfont edit_icon"></i>

三、 上传图标至项目

暂未用过这种方式，待实践。

四、问题踩坑记

1、iconfont的图标使用的时候怎么调整大小？

font-size 就可以。

2、iconfont的图标使用的时候怎么指定颜色？

color 就可以。

3、采用的是下载至本地方案，在合并代码时遇到了 iconfont 相关文件冲突时怎么办？

先合并代码，遇到冲突后，在当前冲突的分支上，去 iconfont 下载最新的“下载至本地”的包，然后将该删的删掉，最后替换掉当前冲突的对应的文件。提交代码就可以了。