element ui 使用 iconfont

最新推荐文章于 2024-05-08 16:51:28 发布

布丁萨玛

最新推荐文章于 2024-05-08 16:51:28 发布

阅读量2k

点赞数 3

分类专栏：经验 element 文章标签： vue iconfont element elementui

本文链接：https://blog.csdn.net/m0_37859502/article/details/113660753

版权

经验同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

element

4 篇文章 1 订阅

订阅专栏

由于elelmentui自带的icon太少了。所以今天写一个elementui如何使用阿里的iconfont的教程。

首先你需要注册一个iconfont账号

iconfont地址

注册之后点击我的项目

点击添加新增一个项目

随便选择一个图标，点击加入购物车

点击购物车按钮

点击添加到项目

选择之前创建的项目

进入我的项目拷贝css在线地址

在vue项目的index.html添加

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    // 主要是这一行代码
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2364355_q6nt5bkwrul.css">
    <title>管理系统</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在assets文件夹下新建一个iconfont.css文件，并写入如下代码

[class^="el-icon-ali"], [class*="el-icon-ali"] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// el-icon-ali 需要替换成创建项目时候的FontClass前缀。
// iconfont 需要替换成创建项目时候的 Font Family

然后在main.js引入这个iconfont.css

import './assets/iconfont.css'

然后就可以在代码中使用了

<i class="el-icon-ali-hongbao1"></i>

布丁萨玛

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
element ui 使用 iconfont

由于elelmentui自带的icon太少了。所以今天写一个elementui如何使用阿里的iconfont的教程。首先你需要注册一个iconfont账号iconfont地址注册之后点击我的项目点击添加新增一个项目随便选择一个图标，点击加入购物车点击购物车按钮点击添加到项目选择之前创建的项目进入我的项目拷贝css在线地址在vue项目的index.html添加<!DOCTYPE html><html lang="en"> <he.
复制链接

扫一扫

专栏目录