图片当图标使用_weixin_30407099的博客-程序员宝宝

技术标签: ViewUI  ui  javascript  

情景:最近用Element UI组件上的图标或者font-awesome小图标

但是这样远不能满足ui的审美,会说你没按设计图实现。

之前的做法:登陆自己阿里图标库账号,把想用的图标添加进项目库,里面有可以生成对应图标的代码 再在页面上使用对应的代码就可以出现对应的图标。

当然这样大家都是会的 而且阿里图标库也有教程。我这里是想实现类似Element ui把图标改成添加一个类名就可以的那种:具体也简单

.icon-organize {
display: inline-block;
&::before {
display: block;
content: '';
width: 15px;
height: 15px;
background: url(对应图片地址) no-repeat;
background-size: auto 13px;
}
}
这样声明之后使用
<i class="icon-organize"></i> 就实现了图标用类名实现 然后我又发现这样的图片是死的 不会变颜色 比如要有点击效果:
那就在父元素类名下增加
&father:hover{
.icon-organize {
&::before {
background: url(点击后效果图片) no-repeat;
background-size: auto 13px;
}
}
}
最近忙于VUE的学习 
 

转载于:https://www.cnblogs.com/wangxiaoer5200/p/9732734.html

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

智能推荐

【DX11习题学习二】第六章练习 Drawing in Direct3D(上)_键盘崩坏的博客-程序员宝宝

本系列只针对书中每章节的编程练习题,不涉及书中的数学题,需要数学部分的解答请点击对应原书 P137 4.7EXERCISES1. Write down the D3D10_INPUT_ELEMENT_DESC array for the following vertex structure:struct Vertex{XMFLOAT3 Pos;XMFLO

10个运维人员需要知道的”系统进程”_study-linux的博客-程序员宝宝

在日常的运维工作中,当我们习惯性的执行ps命令后会看到很多“奇奇怪怪”的进程,而这些进程大部门都是系统的内核进程。很多同学对之了解的甚少,因此今天就为大家整理一篇入门级的系统进程介绍帖,希望能够帮助大家对操作系统进程的理解。在日常的运维工作中,当我们习惯性的执行ps命令后会看到很多“奇奇怪怪”的进程,而这些进程大部门都是系统的内核进程。很多同学对之了解的甚少,因此今天就为大家整

【BZOJ1951】[中国剩余定理][SDOI2010]古代猪文_二分抄代码的博客-程序员宝宝

求g的p次方%mod,根据费马小定理,g^sigma(C(n,d))(d|n)%mod=g^(sigma(C(n,d))(d|n)%(mod-1))%mod,然而mod-1不是质数,只能用把它拆成4个质因数,然后对4个模方程分别求解,先用lucas定理和费马小定里求出对4个质数取模的sigma的值(num[i]),注意,枚举因数d的时候枚举到sqrt(n)就可以了,同时加上C(N,I)和C(n,

chrome好用的几个插件-属于程序员的福利_做一个温柔的程序媛的博客-程序员宝宝

查看链接:http://www.jianshu.com/p/40d147ec84db?ref=myread目前我正在使用的几个插件:1、广告终结者2、ABP(也是屏蔽广告的一个插件)        3、lastPass:(这个插件是通过登录然后使用的,可以将自己的网站表单信息带入自己正在使用的电脑,非常好用)其它几个插件正在尝试。。敬请期

记一下chrome浏览器被毒霸域名劫持解决方案_归落的博客-程序员宝宝

记一下chrome浏览器被毒霸域名劫持解决方案卸载金山毒霸后,浏览器打开会跳转到毒霸页面卸载金山毒霸后,浏览器打开会跳转到毒霸页面把金山毒霸卸载之后,意外的发现自己的chrome浏览器打开的时候,跳出来的是毒霸的页面,被劫持了。按照网上在输入栏输入chrome://version/,发现命令行被重定向到毒霸页面。本来用安全卫士锁住主页,还是存在(看来腾讯还不够流氓,竟然被毒霸给上了)。按照网...

随便推点

NOIP2002-普及组复赛-第二题-级数求和_weixin_30345577的博客-程序员宝宝

题目描述Description  已知:Sn= 1+1/2+1/3+…+1/n。显然对于任意一个整数K,当n足够大的时候,Sn大于K。  现给出一个整数K(1&lt;=k&lt;=15),要求计算出一个最小的n;使得Sn>K。输入输出格式Input/output输入格式:一个正整数K。输出格式:一个正整数N。...

python练习12_い木乄子゛的博客-程序员宝宝

题目:判断101-200之间有多少个素数,并输出所有素数。 #!/usr/bin/python# -*- coding: UTF-8 -*-#from math import sqrtprime = []flag = Truefor i in range(101, 201): k = int(sqrt(i)) for j in range(2, k + 1): ...

python—异常处理_didaojiao4342的博客-程序员宝宝

Python 之-异常处理异常和错误part1:程序中难免出现错误,而错误分成两种1语法错误(这种错误,根本过不了Python解释器的语法检测,必须在程序执行前就改正)#语法错误示范一、if#语法错误示范二、def test: pass#语法错误示范三、print(haha2逻辑错误(逻辑错误)#用户输入...

spring boot 自动配置_中国lanwp的博客-程序员宝宝

文章目录springboot自动化配置spring boot mybatis plus依赖spring boot自动配置相关文件启动的自动配置类MybatisPlusAutoConfigurationspringboot自动化配置这里拿mybatis-plus-boot-starter 为例子说明,其他类似spring boot mybatis plus依赖spring boot引入依赖 - 包含了mybatis和mybatis-spring 及 mybatis-plus3.3.2版本

C++中pair使用详细说明_想去的远方的博客-程序员宝宝_c++ pair

一、pair的介绍pair是一个很实用的 "小玩意",当想要将两个元素绑在一起作为一个合成元素、又不想要因此定义结构体时,使用 pair 可以很方便地作为一个代替品。也就是说,pair 实际上可以看作一个内部有两个元素的结构体,且这两个元素的类型是可以指定的,如下:struct pair{ typeName1 first; typeName2 second;};二、pair的定义要使用 pair,应先添加头文件 #include &lt;utility&gt;...

autosar can协议栈 源码解读_AUTOSAR架构的CAN通讯_他在水中央的博客-程序员宝宝

宏观地介绍可参见:autosar.org/fileadmin/A2. AUTOSAR软件分层架构AUTOSAR架构在三个软件层之间划分出最高的抽象层:应用层(Application Layer, ASW),运行时环境(Runtime Environment, RTE)和底层软件(Basic Software, BSW),三者均在微控制器上运行。这里我们主要关注的是底层软件,它进一步分层为:服务层,...

推荐文章

热门文章

相关标签