Iconfont 在HTML中的使用

番茄西红柿发布于2019-04-23 11:42 / 1836人阅读

摘要：与使用方式相比，具有如下特点兼容性良好，支持，及所有现代浏览器。相比于语意明确，书写更直观。不过因为本质上还是使用的字体，所以多色图标还是不支持的。

一、准备阶段：

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

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

二、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;
}

第三步：挑选相应图标并获取字体编码，应用于页面



完整代码：

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参数。
实现效果：

2.font-class 引用

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

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

　　　3.Symbol 引用　　　

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

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

使用步骤如下：

- 第一步：引入项目下面生成的 symbol 代码：

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

- 第三步：挑选相应图标并获取类名，应用于页面：

三、效果展示

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> More Abouta>
    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 目录下的文件：

效果图：

更多精彩的效果图展示：

云服务器 GPU云服务器 iconfont使用 php在html中的 iconfont php中的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1040.html

字体图标的使用

摘要：字体图标的不足既然字体图标那么有效率，那么为什么不都使用字体图标呢现在的限制主要是字体图标的开发要求比较高，毕竟是开发一种字体。自己开发字体图标很累，幸好有很多乐于分享的，现在有很多网站把一些常用的图标都做成了字体图标分享了出来。目录字体图标的介绍 iconfont的使用基于unicode的用法： ...

shuibo 2019-04-23 11:54 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

LancerComet 2019-08-30 15:56 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

netScorpion 2019-08-02 14:33 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

MorePainMoreGain 2019-08-26 18:18 评论0 收藏0