elementUI-添加自定义图标

elementui的小图标有限,跟UI给的不一样,这个时候咋办呢?百度走起。。。。参考了两篇博主分享的 自定义elementui中的图标 和 建立图标库,这里主要用到第一种

实际中:
在这里插入图片描述
elementUI导航栏
在这里插入图片描述

具体代码:

//自定义图标名el-icon-my-
.el-icon-my-statistic{background: url("./imgs/statistics_icon_nor.png") center no-repeat;
}//content中是中文的Unicode编码; font-size:图标大小; visibility: hidden;来隐藏文字
.el-icon-my-statistic:before{content: "\8d3a";font-size: 14px;visibility: hidden;
}

补充

汉字转换Unicode编码:

直接打开控制台: 汉字.charCodeAt().toString(16); 然后回车;


至于三角形的图标,我直接把箭头的 unicode 值改成了 三角形的 Unicode 值。

/* 上三角\e78f , 下三角\e790*/
aside ul#myAside .el-icon-arrow-down:before {content: "\e78f" !important;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362656.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echarts(一)下载引入,调色盘,[标题、图例组件、坐标轴]

一个简单的例子 1. 下载并引入 &#xff08;1&#xff09;npm install echarts --save &#xff08;2&#xff09;import echarts from echarts //main.js引入echarts 或者在组件中按需引入&#xff0c;查看按需引入的详细模块 <script>// 引入 ECharts 主模块var echa…

P3740 [HAOI2014]贴海报 离散化+线段树

题目描述 Bytetown城市要进行市长竞选&#xff0c;所有的选民可以畅所欲言地对竞选市长的候选人发表言论。为了统一管理&#xff0c;城市委员会为选民准备了一个张贴海报的electoral墙。 张贴规则如下&#xff1a; electoral墙是一个长度为N个单位的长方形&#xff0c;每个单位…

Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G​

全书共15章&#xff0c;主要包括网页制作基础、Dreamweaver CC网页制作、Photoshop CC网页图像设计、Flash CC网页动画设计以及综合案例实战5个部分。通过本书的学习&#xff0c;不仅能让读者学会三大软件的基本操作&#xff0c;而且本书中列举的实战案例&#xff0c;还可以让读…

如何使用示例从Java中的类路径加载资源

Java中的类路径不仅用于加载.class文件&#xff0c;而且还可以用于加载资源&#xff0c;例如属性文件&#xff0c;图像&#xff0c;图标&#xff0c;缩略图或任何二进制内容。 Java提供了API来将这些资源读取为InputStream或URL。 假设您在项目的config文件夹中有一个属性文件 …

Ext 3.0 +ASP.NET2.0 可视化开发介绍

Ext Designer 总算出来了&#xff01;&#xff01;&#xff01;基于Web的应用开发终于可以可视化开发了&#xff0c;而且可以几乎不敲1行代码。 准备工具&#xff1a; &#xff08;1&#xff09;Ext Designer 1.0.2 &#xff08;2&#xff09;Visual Studio 2005 第一步&#x…

创建vue项目(一)搭建vue-cli、项目文件介绍、简单配置

记录一下 拉取项目时 npm run dev 报错 输入&#xff1a;npm rebuild node-sass 再重新 npm run dev 如果不能解决&#xff0c;请看这里 一、搭建vue-cli vue create 项目名称? Please pick a preset: > default (babel, eslint) //默认 > Manually select features …

JPA / Hibernate实体状态转换的初学者指南

介绍 Hibernate将开发人员的思维方式从SQL语句转移到实体状态转换。 一旦实体由Hibernate主动管理&#xff0c;所有更改将自动传播到数据库。 操作域模型实体&#xff08;及其关联&#xff09;比编写和维护SQL语句容易得多。 如果没有ORM工具&#xff0c;则添加新列需要修改所…

创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件(.vue,js代码等)

下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件 一、引入elementUi 顺便一提axios使用说明 和axios在vue中使用 二、准备静态资源 三、封装.vue公共组件 四、封装.js公共组件 五、封装公共的js代码 六、封装全局的filter、directive等 一、引入…

Spring DI的配置使用

1、 依赖和依赖注入 传统应用程序设计中所说的依赖一般指“类之间的关系”&#xff0c;那先让我们复习一下类之间的关系&#xff1a; 泛化&#xff1a;表示类与类之间的继承关系、接口与接口之间的继承关系&#xff1b; 实现&#xff1a;表示类对接口的实现&#xff1b; 依赖&a…

创建vue项目(三)路由跳转、反向代理、本地存储、状态管理

数据更新渲染&#xff0c;axios请求数据&#xff0c;配置环境 一、路由跳转 app.vue <template><div id"app"><keep-alive><router-view/></keep-alive></div> </template><script> export default {name: app }…

jinfo:JVM运行时配置的命令行浏览

在最近的几篇博客中&#xff08;特别是在对Java EE 7性能调优和优化以及WildFly性能调优的书的评论中&#xff09;&#xff0c;我引用了自己过去在某些Oracle JDK命令行工具上的博客文章。 令我震惊的是&#xff0c;我从来没有专门解决过漂亮的jinfo工具&#xff0c;这篇文章旨…

创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节

一、路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一&#xff1a; &#xff08;1&#xff09; 参数配置&#xff1a; { path : xx/:参数变量,component:xx}(2) 使用 <router-link toxx/参数></router-link>(3) 传参 …

Luogu5298 [PKUWC2018]Minimax

太久没写博客了&#xff0c;过来水一发。感觉自己推式子的功力还不够。。。 题目链接&#xff1a;洛谷 首先我们想到&#xff0c;考虑每个叶节点的权值为根节点权值的概率。首先要将叶节点权值离散化。 假设现在是$x$节点&#xff0c;令$f_i,g_i$分别表示左/右节点的权值$i$的概…

js封装常用函数

自己封装函数时&#xff0c;参数最好不要超过3个&#xff0c;若要超过&#xff0c;可以用数组或者对象&#xff1b; 1. 利用&#xff08;Math.random&#xff09;写指定范围的随机数 2. 补零 3. 数组去重 4. 排序 5. 敏感词过滤 6. 判断数组中是否存在某一条数据&#xff0c;结…

JPA教程–在Java SE环境中设置JPA

JPA代表Java Persistence API&#xff0c;它基本上是一个规范&#xff0c;描述了一种将数据持久存储到持久存储&#xff08;通常是数据库&#xff09;中的方法。 我们可以将其视为类似于Hibernate的 ORM工具的东西&#xff0c;除了它是Java EE规范的正式组成部分&#xff08;并…

滚动条造成页面抖动问题

总结&#xff1a; 若用到 margin:0 auto; 使页面居中&#xff0c;若部分页面出现滚动条&#xff0c;滚动条默认有 20px&#xff0c;这样会造成页面抖动&#xff1b; 解决办法&#xff1a;参考 1. html{overflow:scoll;} 让页面一直显示滚动条。 overflow 的几个属性值&#xf…

ie 浏览器布局中的 offset

出现原因&#xff1a; 此处的offset的值表示的是盒子模型经过计算后的实际偏移量&#xff0c;通常是margin及定位偏移量之和&#xff08;flex布局导致的偏移也会计算在内&#xff09;。在此处也无需消除。 解决办法&#xff1a; 父元素设置宽高。设置margin为负数&#xff0…

MySQL集群(PXC)入门

一、学习动机 伴随互联网行业的兴起&#xff0c;越来越多的领域需要相应的技术方案&#xff0c;比如&#xff1a;打出软件、电商平台、直播平台、电子支付、媒体社交。 身边常见的&#xff0c;校园出成绩那一年&#xff0c;我们会感觉网站异常的卡顿&#xff0c;因为访问人数太…

滚动条那些事

一、滚动条样式 1. ie8浏览器 名称描述scrollbar-arrow-color三角箭头的颜色scrollbar-face-color立体滚动条的颜色&#xff08;包括箭头部分的背景色&#xff09;scrollbar-3dlight-color立体滚动条亮边的颜色scrollbar-highlight-color滚动条的高亮颜色&#xff08;左阴影&…

Javascript高级程序设计第二版第十四章--异常--笔记

chaepter 14 错误异常分享。 其实主要是就是try{}catch(error){} finally{}这个语句的理解。主要一点&#xff1a;finally 在 return 之后 运行。这跟java里边的如出一辙。 比如&#xff1a;try{return1;}catch(error){return2;} finally{return0;}返回 return 0;然后接着就是 …