ElementUI引入自定义图标_elementui 引入 自定义图标_ylnzzl的博客-程序员宅基地

技术标签: elementui  ElementUI  vue.js  

目录

步骤说明

新建项目

添加图标

项目设置

文件引入

使用技巧


步骤说明

新建项目

在iconfont网站的”资源管理->我的项目“页面里新建项目,注意”FontClass/Symbol前缀“选项填写el-icon-,"Font Family选项"填写element-icons。

添加图标

搜索要用到的图标点击加入购物车【选择的图标名称是中文名也没关系】,图标添加完后,在购物车面板里选择“添加进项目”。

项目设置

在”资源管理->我的项目“页面里点击”项目设置“,在弹出面板里勾选要用到的”字体格式“,如果不确定要用到哪些字体格式那么可以点击”WOFF2,WOFF,TTF,EOT,SVG“五种格式以提高图标正常显示的浏览器兼容性。保存设置后,可以将鼠标移动到图标上,在弹窗里点击像铅笔的图标开始修改图标基色,以使整体颜色看起来明暗一致。然后点击“下载至本地”按钮将图标下载到本地后解压。

文件引入

将解压后的图标文件夹里的iconfont.css和iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff,iconfont.woff2等iconfont.css里引用到的字体文件复制粘贴到Vue项目里的src/assets/font-icon/目录下,如果没有font-icon目录则新建该目录【也可以改用别的目录名】。

然后在\src\main.js中添加引入iconfont.css,引入路径根据自己Vue项目的实际情况调整。

示例代码:

/* 引入自定义图标文件 */
import '../src/assets/font-icon/iconfont.css';

注意:

        如果在在iconfont网站里新建项目时”FontClass/Symbol前缀“选项填写el-icon,而不是el-icon-,那么可能需要将/src/assets/font-icon/iconfont.css里的每个图标样式自己加上一个中横线“-”,才能正常显示出图标,否则会显示乱码符号。

示例代码:

.el-icon-dot:before {
  content: "\e63f";
}

然后就可以像引用ElementUI自带图标一样地引用自定义图标了。

示例代码:

 <i class="el-icon-airplane"></i>

使用技巧

使用自定义图标时,可以打开iconfont网站里”我的项目“页面,将页面里的“Unicode”选项切换到“Font class”选项,然后将鼠标移动到想要用的图标,在弹窗里选择“复制代码”选项就复制想要使用图标的样式名,然后粘贴到项目里用到图标的位置。这样可以避免自己在本地自定义图标里去查找确认要使用到的图标的字体样式名称,减少工作量。

在iconfont网站“我的项目”页面里可以编辑图标(修改图标占格大小、旋转图标等等)。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ylnzzl/article/details/120470277

智能推荐

CentOS7安装RabbitMQ-实操步骤真实可用_erlang-18.3-1.el7.centos.x86_64.rpm下载-程序员宅基地

1. yum下来一些基础的软件包yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c++ kernel-devel yum install wget2. 下载RabbitMQ所需软件包(这里使用的是 RabbitMQ3.6.5 稳定版本)wget www.rabbitmq.com/releases/erlang/erlang-18.3-1.el7.centos.x86_64_erlang-18.3-1.el7.centos.x86_64.rpm下载

STL源码分析之vector_stl vector源码-程序员宅基地

本篇文章我们来学习vector的源码_stl vector源码

java8判断对象是否为空新写法_java8 判断对象为空-程序员宅基地

1、我们为了避免空指针异常,通常会做一些非空的判断,通常写法如下Object o = ...if(o != null){ do something ...}2、java8 提供了一种更加优美的写法@Testpublic void testOptional() { String strArr[] = {"sada", null, ""}; for (St..._java8 判断对象为空

快速定位mysql是否走索引_mysql 位运算是否走索引-程序员宅基地

快速定位mysql是否走索引文章目录快速定位mysql是否走索引问题背景:当我们查询sql的时候很慢,不知道什么原因,是否在走索引解决办法步骤1. 依赖表结构及测试数据:2. 基本关联查询sql3. 查看执行计划4. 增加索引问题背景:当我们查询sql的时候很慢,不知道什么原因,是否在走索引解决办法步骤1. 依赖表结构及测试数据:CREATE TABLE `student` ( `student_id` int(11) DEFAULT NULL, `student_name` varcha_mysql 位运算是否走索引

6s如何无线连电脑连接服务器,iPhone 6s无线连接能力:WiFi与4G大提速_ManUtd孙泽宇的博客-程序员宅基地

【PConline 杂谈】9月10日凌晨,苹果在旧金山正式发布了新一代iPhone,分别是iPhone 6s与iPhone 6s Plus两款机型。如同前期爆料一样,苹果为新iPhone带来了3D Touch等一系列功能和配置的提升,当中iPhone 6s和iPhone 6s Plus相比上代产品,无线连接能力也得到了相应的提高,4G连接最高速度提升2倍,达到300Mbps,而WiFi连接能力也同..._iphone6swifi信号有没有升级

20行原生JS代码手写ElementUI表格组件_elementui js_蜉蝣&一粟的博客-程序员宅基地

今天给大家分享一下如何用原生JS封装一个基础版的ElementUI表格组件。_elementui js

随便推点

Yocto系列讲解[技巧篇]88 - 离线没网络的情况下构建和编译_yocto 离线构建_fulinux的博客-程序员宅基地

很多时候会遇到有些公司出于保密的需要,公司电脑是不能访问外部网络的,这就产生了离线构建yocto的需求,下面我们就来讲述这种情形。_yocto 离线构建

zynq交叉编译Linux u-boot 全最新环境Vivado2018 Ubuntu2018-程序员宅基地

开发板:Zybo目标文件:u-boot编写时间:2019.01PC平台:win10+虚拟机VMware+Ubuntu18.04LTS(64位)开发平台:Xilinx Vivado SDK 2018.3为了移植Linaro Liunx系统,需要编译u-boot文件,然而在全部使用最新版本的开发环境时,发现网上很多资料已经很陈旧了,走了很多弯路,记录一下。1、安装32位支持库...

学习笔记(2):python全栈开发之django框架实战案例:电商项目中微信支付接口对接-项目上传服务器以及对接域名-程序员宅基地

本课程主要讲解python语言的django框架的项目来实现对接微信公众号的常见接口, 创建Django框架的项目,通过用户购买商品下单的,通过微信支付完成成功下单的实例操作。 注册微信支付的商户 申请微信支付的产品 熟悉Django框架的整个操作..._django框架实际案例来对接微信公众号接口-微信支付

调用windows文件属性对话框-程序员宅基地

SHELLEXECUTEINFO att; ZeroMemory(&amp;att,sizeof(att)); att.cbSize = sizeof(SHELLEXECUTEINFO); att.lpFile = _T( "c:\\ex.xls");//要显示属性的文件 att.lpVerb = _T("properties"); ...

生物信息学|用于预测药物-药物相互作用事件的多模态深度学习框架_多模态生信-程序员宅基地

本篇推文引自:A multimodal deep learning framework for predicting drug–drug interaction events1. 摘要    动机:药物-药物相互作用(DDIs)是药物研究的主要关注之一。很多基于机器学习的方法被提出用于DDI的预测,但大多数都是预测两种药物是否相互作用。研究发现DDIs可引起不同的后续事件,预测DDI相关事件更有助于探讨联合用药或不良反应背后隐藏的机制。    结果:在本文中,我们从DrugBank数据库中收集DDIs_多模态生信

5.1坑-程序员宅基地

五一放假之后遇到过一个坑.注意包名大小写.注意ondestory消息处理机制转载于:https://www.cnblogs.com/nyyy/p/6800846.html