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

在项目中如何使用字体小图标font awesome，iconfont，svg

程序员文章站 2024-02-17 13:55:16
...

一、首先来讲font awesome（官网地址：http://www.bootcss.com/p/font-awesome/）

特点：相对比较简单，在项目中引入下载好的font-awesome.min.css文件及font文件，然后在需要使用的地方引用对应的类名即可，例如：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>

<body>
  <i class="icon-thumbs-up" style="color:red;"></i>
</body>

</html>

浏览器里显示效果：

在项目中如何使用字体小图标font awesome，iconfont，svg

图标的大小，颜色是通过css样式控制的,注意：图标是相当于一个文字，如果要调整大小不是改变宽高，而是字号font-size，同样颜色、居中之类的都可已通过调整文字样式调整。

还需要注意在引用css文件的时候需要注意文件路径，在font-awesome.min.css中有这么一段代码：

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

注意里面的引用路径，最好是按下载的文件的存放位置，以免出现路径不对的情况。

具体需要使用什么图标的时候，可以上官网里找对应的类名即可，是不是很简单，但是使用font awesome有一个缺点：那就是文件较大，影响加载速度  ，所以接下来我要讲另一种方法了。

二、iconfont阿里巴巴图标库（官网地址：http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2）

它的特点：想用几个引几个，不会影响加载速度。

在这里我就需要讲iconfont怎么在项目中使用图标库了，可能刚开始我们使用iconfont的时候都是找到对应的图标，然后直接下载，然后在放到我们的开发项目中（我刚开始就是这样做的），可是这样的话太多的图标导致页面加载速度的变慢以及很多其他问题，可能有小伙伴说把下载好的图片放到一张大图上，做成css sprite的样子，这也是一种方式，可是这是不是又加了一道工序呢，其实我们可以通过更简单的方式，那就是在iconfont项目中使用，废话不多说了，具体步骤如下：

1、如果我们需要创建自己的项目，首先选择我们自己需要的图标添加入库

在项目中如何使用字体小图标font awesome，iconfont，svg

2、选择好需要的图标之后，点击右上角的

在项目中如何使用字体小图标font awesome，iconfont，svg

在右侧会出现当前你已经添加好的图标了

在项目中如何使用字体小图标font awesome，iconfont，svg

3、点击添加至项目，创建新项目或加入已有项目

在项目中如何使用字体小图标font awesome，iconfont，svg

4、点击确定之后进入到我的项目页面：现在我的项目名叫test1

在项目中如何使用字体小图标font awesome，iconfont，svg

在这里你会发现有三种矢量图标的用法：Unicode，Font class和Symbol，不同的用法，使用的也不一样，后面我会细讲，接下来我们点击“暂无代码，点此生成”  会出现Unicode，Font class，Symbol 代码，如下图：

在项目中如何使用字体小图标font awesome，iconfont，svg

在项目中如何使用字体小图标font awesome，iconfont，svg

在项目中如何使用字体小图标font awesome，iconfont，svg

5、接下来我们打开需要添加图标的项目，

1）将Font class中的代码链接粘贴到浏览器中打开，复制其中代码到css文件中（即iconfont的类样式），如下：

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_761688_hsyoz4w4715.eot?t=1532426166473'); /* IE9*/
  src: url('//at.alicdn.com/t/font_761688_hsyoz4w4715.eot?t=1532426166473#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('//at.alicdn.com/t/font_761688_hsyoz4w4715.ttf?t=1532426166473') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_761688_hsyoz4w4715.svg?t=1532426166473#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-plus-circle:before { content: "\e781"; }

.icon-play-circle:before { content: "\e782"; }

.icon-adduser:before { content: "\e7ae"; }

.icon-user:before { content: "\e7af"; }

.icon-star:before { content: "\e7df"; }

.icon-right:before { content: "\e7eb"; }

.icon-left:before { content: "\e7ec"; }

2、在页面中需要的地方引用对应的类名，接下来就是我要将的使用上面说到的三种用法，分别如下：

A：Unicode用法：

<i class="icon iconfont"> &#xe7df; </i>

如果想要改变图标大小和样式，修改color和font-size即可，效果如下：

在项目中如何使用字体小图标font awesome，iconfont，svg

上面代码中的&#xe7df;即为

在项目中如何使用字体小图标font awesome，iconfont，svg

对应图标的Unicode码。

B：Font class用法：

<i class="icon iconfont icon-star"></i>

效果同Unicode效果一样，需要使用哪个，用对应的类就好了

在项目中如何使用字体小图标font awesome，iconfont，svg

C：Symbol用法：

用这个的时候我们需要将Symbol中的代码链接粘贴到浏览器中打开，复制其中代码到js文件中,具体用法如下：

(function(window) {
      var svgSprite =
        '<svg><symbol id="icon-plus-circle" viewBox="0 0 1024 1024"><path d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol><symbol id="icon-play-circle" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path><path d="M719.4 499.1l-296.1-215c-10.6-7.7-25.3-0.2-25.3 12.9v430c0 13.1 14.8 20.5 25.3 12.9l296.1-215c8.8-6.4 8.8-19.4 0-25.8z m-257.6 134V390.9L628.5 512 461.8 633.1z"  ></path></symbol><symbol id="icon-adduser" viewBox="0 0 1024 1024"><path d="M678.3 642.4c24.2-13 51.9-20.4 81.4-20.4h0.1c3 0 4.4-3.6 2.2-5.6-30.8-27.6-65.6-49.7-103.7-65.8-0.4-0.2-0.8-0.3-1.2-0.5C719.2 505 759.6 431.7 759.6 349c0-137-110.8-248-247.5-248S264.7 212 264.7 349c0 82.7 40.4 156 102.6 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.7 18.9-84.8 46-119.3 80.6-34.5 34.5-61.5 74.7-80.4 119.5C147.9 794.5 138 841 137 888.8c-0.1 4.5 3.5 8.2 8 8.2h59.9c4.3 0 7.9-3.5 8-7.8 2-77.2 32.9-149.5 87.6-204.3C357 628.2 432.2 597 512.2 597c56.7 0 111.1 15.7 158 45.1 2.5 1.5 5.5 1.7 8.1 0.3zM512.2 521c-45.8 0-88.9-17.9-121.4-50.4-32.4-32.5-50.3-75.7-50.3-121.6 0-45.9 17.9-89.1 50.3-121.6S466.3 177 512.2 177s88.9 17.9 121.4 50.4c32.4 32.5 50.3 75.7 50.3 121.6 0 45.9-17.9 89.1-50.3 121.6C601.1 503.1 558 521 512.2 521zM880 759h-84v-84c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v84h-84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h84v84c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-84h84c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"  ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"  ></path></symbol><symbol id="icon-star" viewBox="0 0 1024 1024"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"  ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"  ></path></symbol><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"  ></path></symbol></svg>';
      var script = function() {
        var scripts = document.getElementsByTagName("script");
        return scripts[scripts.length - 1]
      }();
      var shouldInjectCss = script.getAttribute("data-injectcss");
      var ready = function(fn) {
        if (document.addEventListener) {
          if (~["complete", "loaded", "interactive"].indexOf(document.readyState)) {
            setTimeout(fn, 0)
          } else {
            var loadFn = function() {
              document.removeEventListener("DOMContentLoaded", loadFn, false);
              fn()
            };
            document.addEventListener("DOMContentLoaded", loadFn, false)
          }
        } else if (document.attachEvent) {
          IEContentLoaded(window, fn)
        }

        function IEContentLoaded(w, fn) {
          var d = w.document,
            done = false,
            init = function() {
              if (!done) {
                done = true;
                fn()
              }
            };
          var polling = function() {
            try {
              d.documentElement.doScroll("left")
            } catch (e) {
              setTimeout(polling, 50);
              return
            }
            init()
          };
          polling();
          d.onreadystatechange = function() {
            if (d.readyState == "complete") {
              d.onreadystatechange = null;
              init()
            }
          }
        }
      };
      var before = function(el, target) {
        target.parentNode.insertBefore(el, target)
      };
      var prepend = function(el, target) {
        if (target.firstChild) {
          before(el, target.firstChild)
        } else {
          target.appendChild(el)
        }
      };

      function appendSvg() {
        var div, svg;
        div = document.createElement("div");
        div.innerHTML = svgSprite;
        svgSprite = null;
        svg = div.getElementsByTagName("svg")[0];
        if (svg) {
          svg.setAttribute("aria-hidden", "true");
          svg.style.position = "absolute";
          svg.style.width = 0;
          svg.style.height = 0;
          svg.style.overflow = "hidden";
          prepend(svg, document.body)
        }
      }
      if (shouldInjectCss && !window.__iconfont__svg__cssinject__) {
        window.__iconfont__svg__cssinject__ = true;
        try {
          document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")
        } catch (e) {
          console && console.log(e)
        }
      }
      ready(appendSvg)
    })(window)
.test {
      color: red;
    }

    .icon {
      width: 1.2em;
      height: 1.2em;
      vertical-align: -0.15rm;
      fill: currentColor;  //fill:currentColor,通过设置color来改变svg的颜色
      overflow: hidden;
    }
<div class="test">
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-star"></use>
    </svg>
  </div>

效果如下：

在项目中如何使用字体小图标font awesome，iconfont，svg

在浏览器查看元素里我们可以看到

在项目中如何使用字体小图标font awesome，iconfont，svg

这些都是js里面定义的svg绘制的图标，我们需要用那个只需要改变use里面的xlink:href的值即可。

<svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-star"></use>
    </svg>

好了，现在三种用法我也说完了，大家是不是也发现他们各自的特点了呢，

总结：unicode用法和font class方法几乎一样，只是fontclass更易用，比如，我们如果觉得图标不好看，我们可以自己改变一下fontclass的定义：

在项目中如何使用字体小图标font awesome，iconfont，svg

只需要改变content属性中的unicode码，html不需要动。而unicode方法，需要改变样式类和html,不适合之后的更新维护。

三、svg即Symbol

svg是二维矢量图形的一种图形格式。比如我们常见的图片格式有.jpg、.png一样，它只是一种图片格式。只不过它是:

使用 XML 格式定义图形图像在放大或改变尺寸的情况下其图形质量不会有所损失由于svg是xml文件，任何文本编辑器都可以对它进行编辑，而且更适合seo优化。Svg文件比jpg格式要小很多

兼容性：IE9+及主流移动浏览器。然后，svg常用用法。

它的优点：单个引用，比较灵活；

缺点：svg代码较长，使页面看起来丑陋；

在开发过程中，我们可能要不断地往项目中添加新图标，所以我们每次向项目中添加图标之后切记要重新生成一下Unicode码，把最新的代码覆盖到之前的css中，否则新添加的图标就不会显示。

开发结束后，可以把图标源码打包保存到本地，通过读取本地也就不会产生加载慢之类的问题。

在项目中如何使用字体小图标font awesome，iconfont，svg

 

上一篇： bootstrap table中显示头行结构

下一篇： Factorization Machine

推荐阅读