vue项目使用iconfont（本地下载、彩色icon）

一、vue-element-admin项目使用iconfont（页面+菜单）

1.iconfont下载资源到本地

2.将下好的文件取这5个放在项目assets文件夹里

3.查看iconfont.css

@font-face {font-family: "iconfont";... ...
}
.icondemo:before {content: "\e613";           //上传的名字会被转换成拼音
}

4.1页面使用

<el-buttontype="primary"icon="iconfont icondemo"
>icon</el-button>

4.2菜单使用

1.src/layout/components/sidebar/Item中添加代码，优先判断引入的icon
2.router/index中meta直接使用

if (icon) {//优先处理 iconfontif(icon.includes('icon')) {vnodes.push(<i class={[icon,'iconfont','sub-el-icon']} />)} else if (icon.includes('el-icon')) {vnodes.push(<i class={[icon, 'sub-el-icon']} />)} else {vnodes.push(<svg-icon icon-class={icon}/>)}
}

二、另一种下载至本地

1.下载iconfont文件，包含iconfont.ttf、iconfont.css（具体下载步骤见第三种）
2.iconfont.ttf 文件转base64（地址戳这里）
3.打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置

@font-face {  font-family: "iconfont";  src: url(data:application/font-woff;charset=utf-8;base64,转换的base64内容) format('woff');
}
/* 或 */
@font-face {  font-family: "iconfont";  src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');
}

4.App.vue中引入iconfont.css文件 && 使用

<style>@import "./static/font/iconfont.css";
</style>
<view class="iconfont icon-XXX"></view>

三、彩色iconfont

1.下载插件：npm install -g iconfont-tools
2.同上，iconfont文件下载后，黑窗口运行命令 iconfont-tools。一直按enter，会多出一个 iconfont-weapp 文件夹
3.iconfont-weapp-icon.css放入static文件夹
4.App.vue引入；项目中使用（t-icon必须；第二个类型要看生成的css文件）

<style>@import './static/iconfont-weapp-icon.css';
</style>
<view class="t-icon icondianhua"></view>

vue项目使用iconfont（本地下载、彩色icon）相关推荐

vue项目实现文件下载中心:下载、取消下载、列表展示
vue项目实现文件下载中心:下载.取消下载.列表展示实现下载进度条封装JS方法使用store存储文件下载进度列表创建一个列表组件在页面中使用效果展示实现下载进度条平时业务中下载文件方式 ...
vue项目改图标_vue使用自定义icon图标的方法
首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 ...
vue项目搭配elementui需要下载的东西
前言: node.js: javascript运行时的环境,node.js之于js,等同于jvm至于Java的地位 npm(node package manager): node.js的包管理器,用于 ...
vue项目集成iconfont 图标
引入阿里iconfont 图标首先我们打开 iconfont官网,注册登录之后点击导航栏上的图标管理 - 我的项目: 进入项目之后,点击新建项目随便添加一个图标到新建好的项目中,并且生成 CSS ...
vue项目中，导出下载Excel表格
方法: // 导出详情数据exportExcel() {const data = {time_type: '',type_id: this.activity_type,activity_id: thi ...
vite创建的vue项目公众号本地开发内网穿透
调试微信项目时在自己的电脑做了内网穿透,通过外网域名访问时页面无限刷新,控制台出现一闪而过的错误信息,捕捉后发现是websocket报错. vite.config.ts server: {hmr: { ...
vue 项目如何读取本地json文件数据
在项目根目录有一个static文件夹目录,将所需要的json文件放在该static目录下,使用axios发起get请求获取对应的json文件数据 import axios from 'axios' / ...
Vue 项目中引入本地第三方 JS 库
一.在 inde.html 中使用 script 标签来引入 1.直接引入,全局可用 ESLint 语法检测会报错:'$' is not define // index.html<script ...
vue项目中点击button下载文件到浏览器
代码实现在src 下面的 directive 文件夹下新建目录 down-load-url down-load-url / index.js文件 /*index.js文件* 后端返回文件的url,前 ...