前端使用阿里巴巴矢量图库的图标大全

最新推荐文章于 2024-08-15 22:57:49 发布

闲人不梦卿

最新推荐文章于 2024-08-15 22:57:49 发布

阅读量1.6k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/atu1111/article/details/118972440

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在前端项目中使用阿里巴巴矢量图库的图标，包括Unicode引用、font-class引用和Symbol引用三种方式，并提供了相应的代码示例。通过这三种方式，开发者可以方便地将图标整合到网页中，实现图标展示和样式调整。

摘要由CSDN通过智能技术生成

前端如何使用阿里巴巴矢量图库的图标

1.首先搜索想要的图标

阿里巴巴矢量图库http://www.iconfont.cn,可以github登录或者微博登录
在这里插入图片描述

2.添加购物车

在这里插入图片描述

3.添加至项目

没有项目可以新建一个项目，添加到项目的好处是可以让你一次性下载多个你看中的图标。
在这里插入图片描述

4.下载至本地

点击资源管理下面的我的项目，再将选中的图标一次性下载到本地
在这里插入图片描述

在这里插入图片描述

5.引用图标

查看下载后的解压的文件
在这里插入图片描述

浏览器查看demo_index.html,引用阿里巴巴图标，有三种方式

5.1 unicode引用方式

<!--
 * @Descripttion: 首页
 * @version: 1.0.0
 * @Author: fengyang
 * @Date: 2021-07-21 16:50:43
 * @LastEditors: fengyang
 * @LastEditTime: 2021-07-21 20:10:51
-->
<!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('./fonts/iconfont.woff2') format('woff2'),
            url('./fonts/iconfont.woff') format('woff'),
            url('./fonts/iconfont.ttf') format('truetype');

      }

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


  </style>
</head>
<body>
<!--
      1.引入unicde，font-face用法
      @font-face {
          font-family: 'XXX'; // 定义字体的名称
          src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式
      }
      2.font-class 引用
      font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
        与 Unicode 使用方式相比，具有如下特点：
        相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
        因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
      3.Symbol 引用
      这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
          支持多色图标了，不再受单色限制。
          通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
          兼容性较差，支持 IE9+，及现代浏览器。
          浏览器渲染 SVG 的性能一般，还不如 png。
 -->
    <span class="iconfont">&#xe66b;</span>
    <span class="iconfont">&#xe608;</span>
</body>
</html>

5.2 font-class引用方式

<!--
 * @Descripttion: 首页
 * @version: 1.0.0
 * @Author: fengyang
 * @Date: 2021-07-21 16:50:43
 * @LastEditors: fengyang
 * @LastEditTime: 2021-07-21 20:10:13
-->
<!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('./fonts/iconfont.woff2') format('woff2'),
            url('./fonts/iconfont.woff') format('woff'),
            url('./fonts/iconfont.ttf') format('truetype');

      }

      .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
     /* 2.font-class  Unicode 使用方式的一种变种*/
      .icon-yonghu:before {
        content: "\e66b";
      }

      .icon-zhaopinguanli:before {
        content: "\e608";
      }




  </style>
</head>
<body>

<!--
      1.引入unicde，font-face用法
      @font-face {
          font-family: 'XXX'; // 定义字体的名称
          src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式
      }
      2.font-class 引用
      font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
        与 Unicode 使用方式相比，具有如下特点：
        相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
        因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
      3.Symbol 引用
      这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
          支持多色图标了，不再受单色限制。
          通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
          兼容性较差，支持 IE9+，及现代浏览器。
          浏览器渲染 SVG 的性能一般，还不如 png。
 -->
    <span class="iconfont icon-yonghu"></span>
    <span class="iconfont icon-zhaopinguanli"></span>
</body>
</html>

5.3 Symbol引用方式


<!--
 * @Descripttion: 首页
 * @version: 1.0.0
 * @Author: fengyang
 * @Date: 2021-07-21 16:50:43
 * @LastEditors: fengyang
 * @LastEditTime: 2021-07-21 20:14:45
-->
<!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 {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }


  </style>

</head>
<body>

<!--
      1.引入unicde，font-face用法
      @font-face {
          font-family: 'XXX'; // 定义字体的名称
          src: url('path/xx.ttf xx.woff etc'): // 字体存放路径 可以是类型文件路径或远程地址 也可以是base64编码形式
      }
      2.font-class 引用
      font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
        与 Unicode 使用方式相比，具有如下特点：
        相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
        因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
      3.Symbol 引用
      这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
          支持多色图标了，不再受单色限制。
          通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
          兼容性较差，支持 IE9+，及现代浏览器。
          浏览器渲染 SVG 的性能一般，还不如 png。
 -->
 <script src="./fonts/iconfont.js"></script>
 <svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-yonghu"></use>
</svg>
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-zhaopinguanli"></use>
</svg>
</body>
</html>