阿里图标库的使用

时间：2021-05-24 12:51:12 阅读：0 评论：0 收藏：0 [点我收藏+]

在web端，阿里的iconfont图标库提供了三种引入图标的方式

1.Unicode

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      @font-face {
      font-family: "iconfont"; 
      src: url(‘//at.alicdn.com/t/font_2549818_g15zrk8wmwb.woff2?t=1621078803946‘) format(‘woff2‘),
          url(‘//at.alicdn.com/t/font_2549818_g15zrk8wmwb.woff?t=1621078803946‘) format(‘woff‘),
          url(‘//at.alicdn.com/t/font_2549818_g15zrk8wmwb.ttf?t=1621078803946‘) format(‘truetype‘);
    }
    .iconfont {
      font-family: ‘iconfont‘;
    }
  </style>
</head>
<body>
  <div class="iconfont">&#xe6c9;</div>
</body>
</html>

浏览器中显示如下

字体文件其实就是一个以unicode作为索引的字形表。

html中其中&表示转义，#x可以用于表示16进制转义字符。

那么如何才能知道我们字体文件中每个字形对应的是哪个unicode码呢?可以从下载的地方看到我们想下载的iconfont对应的unicode码

2.Font class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2549818_g15zrk8wmwb.css">
  <style>
  </style>
</head>
<body>
  <div class="iconfont icon-you-tube"></div>
  <div class="iconfont icon-whats-app"></div>
  <div class="iconfont icon-twiter"></div>
</body>
</html>

浏览器中显示

技术图片

引进来的css文件内容如下：

@font-face {
  font-family: "iconfont"; /* Project id 2549818 */
  src: url(‘//at.alicdn.com/t/font_2549818_g15zrk8wmwb.woff2?t=1621078803946‘) format(‘woff2‘),
       url(‘//at.alicdn.com/t/font_2549818_g15zrk8wmwb.woff?t=1621078803946‘) format(‘woff‘),
       url(‘//at.alicdn.com/t/font_2549818_g15zrk8wmwb.ttf?t=1621078803946‘) format(‘truetype‘);
}

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

.icon-you-tube:before {
  content: "\e6c9";
}

.icon-whats-app:before {
  content: "\e6ee";
}

.icon-twiter:before {
  content: "\e603";
}

可以看出，这种引入方式和原理与第一种类似，只是在dom上增加了伪元素，css中正斜杠\表示一个16进制数字。这样的好处是我们不用自己写unicode码，只需添加上相应的类名就行

类名的获取也是在下载的地方

技术图片

3.Symbol

　　官网介绍

　　这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title> 
  <style>
    .icon {
      /* 通用的css代码（引入一次就行） */
      width: 1em;
      height: 1em;
    }
    .my-class {
        /* 可以通过使用font-size进行设置图标大小 */
      font-size: 500px;
    }
  </style>
</head>
<body>
  <svg class="icon my-class" aria-hidden="true">
    <use xlink:href="#icon-1_jifenduihuan-02"></use>
  </svg>
  <script src="https://at.alicdn.com/t/font_2549818_s5mzw8ufe9t.js"></script>
</body>
</html>

浏览器显示如下

技术图片

svg的大小不是不支持font-size修改的吗？如何实现的呢？其实这里用了一个比较hack的方式，就是把图标元素的宽高都写为1em，而em的大小是相对于该元素的字体大小（前面文章中有详细叙述）的，这样就实现了svg宽高跟着svg的字体大小一起变了。

总结

Unicode和Font class本质都是使用系统的字体渲染引擎，优点就是兼容性好，缺点就是只支持单色图标

Symbol是使用svg，支持多色，缺点就是兼容性稍差，支持ie9+，现代浏览器

阿里图标库的使用

标签：nic sheet bsp div 大小做了设置下载 hat

原文地址：https://www.cnblogs.com/wanqiblog/p/14774220.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行