iconfont-阿里巴巴矢量图标库的食用方式

最新推荐文章于 2024-05-06 10:59:29 发布

厂里英才

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量322

点赞数 3

分类专栏： Vue 文章标签：前端 vue 阿里巴巴矢量图标库

本文链接：https://blog.csdn.net/qq_71654538/article/details/136608129

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

2.5.1 index.html中添加fontclass代码

2.5.2 挑选相应图标并获取类名，应用于页面

1 前言

本人在最近的学习过程中，发现了一个方便好用的字体图标平台iconfont-阿里巴巴矢量图标库，它在一定程度上解决了我素材的烦恼，现将其食用方法进行介绍。其官网链接如下：

iconfont-阿里巴巴矢量图标库

本文主要介绍图标的食用方法，字体请读着自行探索。

2 食用方法

2.1 搜索需要的图标

2.2 选择需要的图标并添加入库

2.3 添加至项目

2.4 获取代码

2.3确定之后一般会跳转到我们所需页面，如果没有跳转，可以按如下操作到达所需页面。如下。

如果成功到达所需页面就可以按照如下操作获得代码。

我们可以看到有三种方式，我们这里选择使用Font Class，详细和其它方法可以查看官方文档：

iconfont-阿里巴巴矢量图标库

2.5 添加至我们的项目

2.5.1 index.html中添加fontclass代码

将刚才2.4获取的代码粘贴至index.html，如下：

<head>
    <!--    其它代码-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

2.5.2 挑选相应图标并获取类名，应用于页面

图标类名的获取方式，如下：

在我们的vue组件适当位置添加所需图标的类名，如下，icon-xxx就是我们需要替换的类名：

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

更具体点，如下：

<template>
  <header class='app-header'>
    <div class="container">
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜">
      </div>
    </div>
  </header>
</template>

效果大致如下：

厂里英才

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
iconfont-阿里巴巴矢量图标库的食用方式

本人在最近的学习过程中，发现了一个方便好用的iconfont-阿里巴巴矢量图标库，它在一定程度上解决了我素材的烦恼，现将其食用方法进行介绍。本文主要介绍图标的食用方法，字体请读着自行探索。
复制链接

扫一扫