vue3前端项目引入iconfont阿里图标
1.首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中
2. 进入项目以后 选择 Font class 并下载到本地
- 下载到本地，解压以后的文件夹列表如下：
3. 把红框中的部分 粘贴到 自己的项目中，记得放在 static（或assects目录）文件目录下，因为字体图标也属于静态资源的一部分。
4.在main.ts文件内全局引入 阿里云字体图标 css,记得使用 路径要正确，如果此时编译不正确，说明 引用路径存在问题
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/global.css'
import './assets/icons/iconfont/iconfont.css' // 引入阿里云字体图标css
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import store from './store/index'
import PaginationTable from './components/PaginationTable/Table.vue'createApp(App).use(router).use(ElementPlus).use(store).component('PaginationTable', PaginationTable).mount('#app')
5. 项目中使用图标就可以使用了
<i class="iconfont iconedit" />
vue3前端项目引入iconfont阿里图标相关推荐
- vue前端项目引入iconfont阿里图标（font class）
1.首先进入阿里图标库官网(iconfont-阿里巴巴矢量图标库),选取你所要的图标,将其添加购物车. 2.然后进入购物车,点击添加进项目 3.点击下载到本地 4.将下载的文件复制下来 5.在main ...
- 微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份 进行了网站维护,维护之后,不能"生成在 ...
- vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置 引入assets中的图标路径 (7)页 ...
- vue中在线引入iconfont字体图标
记录在线引入iconfont字体图标. 在iconfont官网上添加项目并添加完需要的图标后,在资源管理==>我的项目中生成代码,再到vue项目中app.vue组件里的style标签下引用即可. ...
- 微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标 由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图 标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
- vue/react/web前端项目部署到阿里云服务器_nginx_pm2流程及部署前的准备
前端开发完成的项目,不管是使用vue.react.或者是别的web项目,最终都是要部署到外网上,让用户可以通过域名来访问.这篇文章以一个 react 移动端的项目为例,讲怎样将自己本地的项目部署到阿里 ...
- 【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量
vue3+vite项目引入SCSS及使用SCSS全局变量
- iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
1.登录阿里图标官网 2.注册自己的账户,创建项目 3.加入自己使用的图标,加入购物车 4.选中项目 5.选中引入方式: 第一种.使用统一码 Unicode 第二种.使用class Font clas ...
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 2018-11-9更新 VX号: LJT-917 这是我的微信公众号全是技术文章: 1.傻瓜式引用:由于这种方法及其 ...
- 前端引入iconfont矢量图标详细步骤（图文）
我们在编写网页的时候,为了防止加载过多的图片导致网页加载缓慢的问题,从而需要引入一部分矢量图标库里面的图标来进行操作,这里主要的为大家展示国内阿里巴巴矢量图标库的使用教程. Iconfont-阿里巴巴 ...
最新文章
- Vue组件绑定自定义事件
- 有意思的。带情感的语音转换，可以下载！
- visio2007 画流程图杂记
- 某宝千万级规模高性能、高并发的网络架构
- 安全警报：Oracle 2018一月号安全补丁修复由来已久安全漏洞
- 信息系统项目管理师：第二三章：信息系统项目管理基础与立项管理
- mysql对所有列的数据进行修改6_MySQL的SQL语句 - 数据定义语句（6）- ALTER TABLE 语句 （3）...
- PHP命令注入***
- pcl里面的RoPs特征(Rotational Projection Statistics)
- 这位教授2 年一篇 Science，再获教科书级的重大发现
- Hadoop组件之-HDFS(HA实现细节)
- C# 异步调用控件 跨线程调用控件 跨线程赋值
- oracle客户端下载和plsql下载以及配置远程连接oracle服务端（超详细）
- AI人工智能、机器学习 面试题（2022最新版）
- 在线 Python运行工具
- nodejs爬虫网络图片
- vue使用 svg图片以及修改svg图片颜色
- python3判断变量存在_Python3基础 list in/not in 判断一个变量是否在列表中存在
- 智慧立法平台，以“智慧”赋能立法工作新格局
- 将blogbus博客搬家至百度空间