vue中 使用element-ui 图标和阿里字体图标结合使用
vue中 使用element-ui 图标和阿里字体图标结合使用
1 登录阿里字体图标官网
2 图标管理 --> 我的项目 --> 创建一个项目
3 开始搜有想要的图标添加到我的项目中
4 下载到本地
5 解压，拷贝到src/asserts/icon下
.
├── demo.css
├── demo_fontclass.html
├── demo_symbol.html
├── demo_unicode.html
├── iconfont.css
├── iconfont.eot
├── iconfont.js
├── iconfont.svg
├── iconfont.ttf
└── iconfont.woff
6 关键一步 修改 iconfont.css，将下面代码段拷贝到文件中
[class^="el-icon-my"],
[class*=" el-icon-my"]/*这里有空格*/{font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
7 main.js中引用
// 使用阿里的icon
import './assets/icon/iconfont.css'
- 1
- 2
8 组件中使用，跟element自带的使用方法一样
直接添加class类名即可
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adley_app/article/details/84986809
vue中 使用element-ui 图标和阿里字体图标结合使用相关推荐
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
- 【uniapp引入阿里字体图标】
uniapp引入阿里字体图标 引入阿里字体图标 引入阿里字体图标 链接奉上 uni-app字体图标 阿里图标官网 nvue中不可直接使用 css 的方式引入字体文件,需要使用以下方式在 js 内引入. ...
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
- 如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地 然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
- npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
- vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
- 模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
最新文章
- spring配置datasource三种方式 数据库连接
- Banner 自动无限轮播(普通)
- js及jQuery实现checkbox的全选、反选和全不选
- Programming Computer Vision with Python （学习笔记八）
- 前端vue框架的跨域处理方法
- 《此生未完成》痛句摘抄（4）
- 在Solaris系统下如何更改网络配置？
- 【数字图像处理】傅里叶变换在图像处理中的应用
- oracle yum 本地源,Linux YUM本地源配置
- .net中 参数out,ref,params的区别
- AUTOCAD输出打印图片格式时空白
- 我的IT之路------来自黑马程序员
- 《STL源码剖析》--memery
- Instance Segmentation by Jointly Optimizing Spatial Embeddings and Clustering Bandwidth【论文解读】
- 创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证.
- Vertx学习一：这玩意是到底是个啥
- potplayer播放完毕后自动删除播放记录，不保留近期播放记录
- C语言数据结构与算法---图的遍历
- python requests+unittest+beautifulreport+jenkins实现接口自动化（下）
- 【学习记录】基于python爬取Flickr图片及元数据