[css] 使用css画文件夹icon和话筒icon

在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个是画的文件夹和话筒的icon

效果:

文件夹:

.folderBtn {display: inline-block;background-color: transparent;overflow: hidden;font-size: 1px;
}
.folderBtn:before {content: '';float: left;background-color: #9da0a0;width: 15px;height: 3px;margin-left: 2px;border-top-left-radius: 2px;border-top-right-radius: 2px;box-shadow: 2px 2px 0 0 #9da0a0;
}
.folderBtn:after {content: '';float: left;clear: left;background-color: #d4d6d6;width: 33px;height: 22px;border-radius: 1px;
}

话筒:

.audioIcon {color: #9da0a0;position: relative;width: 12px;height: 14px;border-left: solid 1px currentColor;border-right: solid 1px currentColor;border-bottom: solid 1px currentColor;border-radius: 0 0 50% 50%;display: inline-block;
}
.audioIcon:before {content: '';position: absolute;left: 1px;top: -6px;width: 8px;height: 17px;border: solid 1px currentColor;border-radius: 4px;background-color: currentColor;
}
.audioIcon:after {content: '';position: absolute;left: 4px;bottom: -4px;width: 1px;height: 4px;background-color: currentColor;
}

[css] 使用css画文件夹icon和话筒icon相关推荐

vue-element-admin花裤衩项目，关于下载 svg 并放到文件夹之中，修改Icon字体图标的颜色样式问题
首先,搜索并找到你需要的图标,将它采集到你的购物车里,在购物车里,你可以将选中的图标添加到项目中(没有的话,新建一个),后续生成的资源/代码都是以项目为维度的. 阿里字体图标库 Icon 点击下载图片 ...
html css建站的文件夹,建站教程CMS建站DIV+CSS常用的Html网页布局代码汇集
CSS: 以下是引用片段: #wrap{ width:100%; height:auto;} #column{ float:left; width:60%;} #column1{ float:left ...
Java批量完成对文件夹下全部的css与js压缩，利用yuicompressor
大部分代码我是从网上找的, 只有对文件的遍历是我自己写的: 其实原理十分简单利用yuicompressor已经编好的方法,我们写一个Java程序来调用即可: yuicompressor-2.4.8. ...
html有几个文件夹,关于webpack打包问题，怎么打包成多个文件夹，每个文件夹下有相应的html，js和css？...
用vue-cli创建的工程,默认webpack配置是打包成单文件,现在有个需求是打包出很多文件夹,其相对应的html,js和css在不同文件夹下,自己修改了一些配置,改为多chunk形式,html被单 ...
html/APP/main/api文件夹 mock文件夹
文章目录 index.html api文件夹 ajax.js index.js mockAjax.js mock文件夹 banner.json floor.json mockServer.js --- ...
html图片分开,webpack单独分离打包css，css里引用的图片路径错误，怎么解决？
现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致. 打包前: 从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如 ...
mac同步linux文件夹在哪里设置,Linux和Mac上的一些特殊文件将不再同步
近日有用户报告, Mac/Linux上创建的某些文件, 无法成功同步到Windows平台上. 我们对这个问题进行了修正. 这个修正可能会影响到Linux和Mac用户中的极少数, 大概为数百位用户. ...
Android 项目中文件夹的作用
Android 项目中文件夹的作用 1. src:存放所有的*.java源程序. 2. gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3. assets:可 ...
如何在Windows资源管理器中自定义文件夹背景和图标
We've covered a lot of Windows tweaks over the years, and today we're going to show you how to custo ...

[css] 使用css画文件夹icon和话筒icon

[css] 使用css画文件夹icon和话筒icon相关推荐

最新文章

热门文章