欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Iconfont 在HTML中的使用

程序员文章站 2022-09-30 11:27:16
一、准备阶段: a.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标,加入购物车 b.点击网页中的购物车下载代码 二、3种方法实现 Iconfont 的HTML显示 Unicode 引用 Unicode 是字体在网页端最原始的应用方式,特点是: 兼容性最好,支持 IE6+,及所有现 ......

一、准备阶段:

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

   Iconfont 在HTML中的使用

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

  Iconfont 在HTML中的使用

二、3种方法实现 iconfont 的html显示

  1. 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">&#xe612;</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">&#xe612;</span>
        </body>
    
    </html>

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

  2. 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">

      第二步:挑选相应图标并获取类名,应用于页面:
      Iconfont 在HTML中的使用

      <span class="iconfont icon-setup"></span>

 

   3.symbol 引用   

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

    • 支持多色图标了,不再受单色限制。
    • 通过一些技巧,支持像字体那样,通过 font-sizecolor 来调整样式。
    • 兼容性较差,支持 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: 1;

    /* 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中的使用     Iconfont 在HTML中的使用