关于阿里矢量图标的三种使用方法

最新推荐文章于 2025-03-25 10:35:29 发布

zhengsanmiing

最新推荐文章于 2025-03-25 10:35:29 发布

阅读量4.9k

点赞数 6

文章标签： css web javascript

本文链接：https://blog.youkuaiyun.com/zhengsanmiing/article/details/117811428

版权

本文介绍了在Web开发中如何使用阿里矢量图标库的三种方法：1. Unicode方法，包括登录网站、复制代码、自定义样式及引用；2. Font class方法，涉及选中Font class复制代码、引入链接及应用图标；3. Symbol方法，讲解选择Symbol、引入JS文件及页面应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Unicode方法：

1.1 首先我们登录阿里图标的网址：iconfont-阿里巴巴矢量图标库。

1.2 进入到我的项目里面：

1.3：点击复制代码：

1.4 在网页代码的style标签中粘贴：

 <style type="text/css" media="screen">
        @font-face {
            font-family: 'iconfont';
            /* project id 2153039 */
            src: url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.eot');
            src: url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.eot?#iefix') 
            format('embedded-opentype'),
                 url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.woff2') format('woff2'),
                url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.woff') format('woff'),
                url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.ttf') format('truetype'),
                url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.svg#iconfont') format('svg');
        }
 </style>

注意：你复制下来的url地址前面是没有http的，所以得自己加上。

1.5 自己定义 .iconfont 样式：

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

1.6 引用于页面：

  <div>
    <i class="iconfont">&#xe67b;</i>
 </div>

在浏览器上运行，你可以发现成功了。

2.Font class方法：

2.1 在项目总选中Font class 点击复制代码

2.2用link引入到自己的网页上

 <link rel="stylesheet" href="https://at.alicdn.com/t/font_2153039_kfrgdzqqwup.css">

注意：在引入的网址也是没有http的记得加上

2.3 在自己的网页中用 calss类来应用图标

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

3.Symbol方法：

3.1 在项目中选中Symbol，然后复制他的js文件地址

3.2 同样在自己的网页中引入记得加上http；

<script type="text/javascript" src="http://at.alicdn.com/t/font_2135638_e05szvk1kza.js"></script>

3.3 然后在应用于页面：

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

以上都是在线引入的方式，当然还有下载到本地文件的方式，在这里我就不多讲啦。