Webpack项目中引入IconFont图标

最新推荐文章于 2024-09-13 09:04:58 发布

pengjunlee

最新推荐文章于 2024-09-13 09:04:58 发布

阅读量3.4k

点赞数

分类专栏： Vue.js入门实战文章标签： iconfont

本文链接：https://blog.csdn.net/pengjunlee/article/details/100098786

版权

Vue.js入门实战专栏收录该内容

38 篇文章 7 订阅

订阅专栏

本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标。

IconFont官网：https://www.iconfont.cn/

1、打开IconFont官网并登陆自己的账户。

2、挑选你喜欢的图标，添加入库。

3、进入购物车查看已挑选的图标，下载代码。

4、将下载后的图标代码解压，文件如下。

5、将解压文件复制到项目的 src/assets 目录下。

6、在 App.vue 中引入 iconfont.css 。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
// 全局引入 IconFont
import "./assets/iconfont/iconfont.css"
export default {
  name: 'App'
}
</script>

<style type="text/css">
#app{
  height: 100%;
}
</style>

7、如何使用IconFont图标。

在图标代码的解压目录中有一个 demo_index.html 文件，其中包含了所下载的图标用法示例，提供了 Unicode 、Font class、Symbol 三种方式使用图标。

Font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

例如，在element按钮中使用上面的调试图标：

      <div class="el-button el-button--default el-button--small" @click="tiaoshi">
        <i id="collapsedIcon" class="iconfont icon-icon_tiaoshi"></i>
      </div>

效果如下：