Iconfont 在HTML中的使用

一、准备阶段：

　　a.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标，加入购物车

　　　 Iconfont 在HTML中的使用

　　b.点击网页中的购物车下载代码

　　 Iconfont 在HTML中的使用

二、3种方法实现 Iconfont 的HTML显示

Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

使用步骤如下：
第一步：在CSS代码块或CSS文件中使用 @font-face 声明字体

@font-face {

  font-family: 'iconfont';

  src: url('iconfont.eot');

  src: url('iconfont.eot?#iefix') format('embedded-opentype'),

      url('iconfont.woff2') format('woff2'),

      url('iconfont.woff') format('woff'),

      url('iconfont.ttf') format('truetype'),

      url('iconfont.svg#iconfont') format('svg');

}

第二步：定义使用 iconfont 的样式

.iconfont {

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

第三步：挑选相应图标并获取字体编码，应用于页面
Iconfont 在HTML中的使用

<span class="iconfont"></span>

完整代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            @font-face {

                font-family: 'iconfont';

                src: url('iconfont.eot');

                src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');

            }

            .iconfont {

                font-family: "iconfont" !important;

                font-size: 16px;

                font-style: normal;

                -webkit-font-smoothing: antialiased;

                -moz-osx-font-smoothing: grayscale;

            }

        </style>

    </head>

    <body>

        <span class="iconfont"></span>

    </body>

</html>

注意：CSS代码块中的 @font-face 内的 src: url('iconfont.eot'); 中的 url 即为之前准备阶段下载的源码文件夹下的对应文件，此处的完整代码的文件路径与 iconfont.eot 在同一目录下，若相应文件不在同一目录下请修改url参数。
实现效果：
Iconfont 在HTML中的使用

2.font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：
1. 兼容性良好，支持 IE8+，及所有现代浏览器。
2. 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
3. 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
4. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
  使用步骤如下：
  第一步：引入项目下面生成的 fontclass 代码（即为准备阶段下载的代码文件中的iconfont.css文件）重要！！！：
```
<link rel="stylesheet" href="./iconfont.css">
```
  第二步：挑选相应图标并获取类名，应用于页面：
```
<span class="iconfont icon-setup"></span>
```

　　　3.Symbol 引用　　　

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
- 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

- 第一步：引入项目下面生成的 symbol 代码：
```
<script src="./iconfont.js"></script>
```

第二步：加入通用 CSS 代码（引入一次就行）：

<style>

.icon {

  width: 1em;

  height: 1em;

  vertical-align: -0.15em;

  fill: currentColor;

  overflow: hidden;

}

</style>

第三步：挑选相应图标并获取类名，应用于页面：
Iconfont 在HTML中的使用

<svg class="icon" aria-hidden="true">

  <use xlink:href="#icon-setup"></use>

</svg>

三、效果展示

index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title></title>

        <link rel="stylesheet" href="css/bootstrap.css" />

        <link rel="stylesheet" href="css/iconfont-style.css" />

    </head>

    <body>

       <a class="btn btn-lg btn-primary"><i class="icon icon-info"></i>&nbsp;More About</a>

    </body>

</html>

iconfont-style.css

@font-face {

    font-family: 'iconfont';

    src:url('../fonts/iconfont.eot?-8vg322');

    src:url('../fonts/iconfont.eot?#iefix-8vg322') format('embedded-opentype'),

        url('../fonts/iconfont.woff?-8vg322') format('woff'),

        url('../fonts/iconfont.ttf?-8vg322') format('truetype'),

        url('../fonts/iconfont.svg?-8vg322#iconfont') format('svg');

    font-weight: normal;

    font-style: normal;

}

[class^="icon-"], [class*=" icon-"] {

    font-family: 'iconfont';

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height:;

    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

.icon-user-female:before {

    content: "\e106";

}

.icon-user-follow:before {

    content: "\e064";

}

.icon-user-following:before {

    content: "\e065";

}

更多定义的icon此处省略........

引用的 fonts 目录下的文件：

Iconfont 在HTML中的使用

效果图：

Iconfont 在HTML中的使用

更多精彩的效果图展示：

Iconfont 在HTML中的使用

秒客网

Iconfont 在HTML中的使用

一、准备阶段：

二、3种方法实现 Iconfont 的HTML显示

Unicode 引用

2.font-class 引用

3.Symbol 引用

三、效果展示

相关文章