vue项目中使用阿里巴巴矢量图库图标的操作步骤

1）网站 https://www.iconfont.cn/ 找个账号登录，收藏一些自己想要的图标。

2）开始新建项目，项目名称任意，记住fontClass/ symbot 前缀。

3）把收藏的图标放入到库中

4）添加到新建的项目，选择下载到本地然后查看文件

5）下载的文件放入到Vue 项目中（注意图中的路径） /static/font/

6）修改其中的iconfont.css 文件对应位置添加代码

注意其中class~="el-icon-itxhyIcon" icon-itxhyIcon 是你新建项目中的symbol前缀

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

7) 在main.js 中引入css 文件

8）在vue代码中使用

<el-button style="margin-right:30px;float:right;margin-top:13px"
size="mini " icon="el-icon-itxhyzhongyingzhuanhuan"
@click="handle">
</el-button>

vue项目中使用阿里巴巴矢量图库图标的操作步骤相关推荐

在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
2021-11-26 vue项目中如何引入iconfont图标库
1.下载在iconfont官网上下载选好的项目中的图标,解压获得一个文件夹,复制其中的文件到vue项目的assets/iconfont文件夹下 2.引入在main.js中引入import '@/a ...
vue项目中如何使用字体图标，简单清晰明了！
1.登录阿里巴巴图标库官网,创建一个自己的项目,并将对应的svg图片添加或上传到对应的项目中,如下图所示: 2.点击[下载至本地]按钮,将文件夹下载下来: 3.在项目中src/assets目录下创建一 ...
vue项目中使用阿里巴巴iconfont字体图标
1.把下载下的东西解压全放在vue的某个文件夹 2.在main.js引入 import './assets/iconfont/iconfont.css' 3.在需要用图标的标签比如span标签引入你想 ...
在iview + vue项目中使用自定义icon图标
最近做一个后台管理系统,是用iview+vue cli2做的,在做的过程中需要将左侧的导航栏加入icon图标,但是iview库里的图标和UI要求不符,这就需要引入自己的图标库. 1. UI设计师会把自 ...
vue项目中引入阿里 iconfont 图标动态渲染导航菜单图标
vue + element 后台项目,项目中都是用的 element-ui 的图标但是导航菜单是通过后台数据渲染的,所以在阿里图标库找了图标给后台,再渲染步骤一: 在图标库找到想要的图标,加入购物 ...

vue项目中使用阿里巴巴矢量图库图标的操作步骤

vue项目中使用阿里巴巴矢量图库图标的操作步骤相关推荐

最新文章

热门文章