18910140161

在web上使用的Css图标样式

顺晟科技

2022-09-13 13:52:31

173

自己闲的无聊写了一个CSS样式,是用于切换网页常用的图标。各位牛人勿喷。

用到的图标:

  

在页面中调用:

如果用彩色的就直接写 :class="icon-R10C1", 若用黑色的图标只需在后面加一个: icon-black 这个即可

样式命名有点鹾,不要见怪!

icon-R10C2  为
Row10 Column2 第10行第2列

<span class="icon-R10C1 icon-black"></span> 

<span class="icon-R10C2 icon-black"></span>
<span class="icon-R10C3 icon-black"></span>
<span class="icon-R10C4 icon-black"></span>
<span class="icon-R10C5 icon-black"></span>
<span class="icon-R10C6 icon-black"></span>
<span class="icon-R10C7 icon-black"></span>
<span class="icon-R10C8 icon-black"></span>
<br />
<span class="icon-R10C1"></span>
<span class="icon-R10C2"></span>
<span class="icon-R10C3"></span>
<span class="icon-R10C4"></span>
<span class="icon-R10C5"></span>
<span class="icon-R10C6"></span>
<span class="icon-R10C7"></span>
<span class="icon-R10C8"></span>

若自己想用其他颜色的图标可以通过PS自己调整颜色之后保存png格式,之后在css文件中添加一个样式,如下:

.icon-black {
  background-image: url("../img/自己保存的文件名称.png");

 页面效果:

 

这边我只做了最后一行的显示!

下载地址:http://files.cnblogs.com/Murray/css.zip

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航