重庆大足网站建设,资讯网站 怎么做,wordpress中文插件seo百度,做旅游网站需要的背景vue3vitets同时引入多个iconfont图标 本文目录 vue3vitets同时引入多个iconfont图标下载iconfont库创建项目库图标加入项目库下载到本地 vue3引入文件存放位置main.ts设置组件中使用 分别引入多个iconfont 下载iconfont库
创建项目库
iconfont官网#xff1a;https://www.ic…vue3vitets同时引入多个iconfont图标 本文目录 vue3vitets同时引入多个iconfont图标下载iconfont库创建项目库图标加入项目库下载到本地 vue3引入文件存放位置main.ts设置组件中使用 分别引入多个iconfont 下载iconfont库
创建项目库
iconfont官网https://www.iconfont.cn/ 选择图标加入购物车
图标加入项目库
打开购物车选择【添加至项目】
下载到本地
首页选择【资源管理】–【我的项目】进入【我的项目】
选择要下载的项目点击【下载至本地】
【解压】后查看文件结构
vue3引入
文件存放位置
在assets目录下新建font目录 在浏览器打开demo_index.html可以所有的图标样例和引用方式
main.ts设置
引入iconfont.css和iconfont.js不使用多色图标的话可以不用引入iconfont.js文件
import /assets/font/font_chat/iconfont.css
import /assets/font/font_chat/iconfont.js组件中使用
加入css样式可以在App.vue全局加入也可以组件内单独加入
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}以svg图标为例从demo_index.html可以查看和复制svg-icon是图标自定义样式
svg classicon svg-icon aria-hiddentrueuse xlink:href#icon-user3/use
/svg效果如下
分别引入多个iconfont
目的是为了区分多个iconfont的cssclass和重名覆盖 查看iconfont.css内容 打开【项目设置】 修改【前缀】和【Font Family】 查看修改后的iconfont.css 或者可以在已经下载的icon文件夹搜索对应的名字iconfont全局修改即可包括css文件和js文件
