我们经常在很多网站上见到更改网站的主题时,图标的颜色也改变了,我们总是觉的这一项功能非常伟大,因为我们知道使用CSS是无法完成更改图片的颜色的。那么,网站上随心所欲的图标颜色是采用N多个图片不断的切换来实现的吗?

  答案当然不是,我也曾想过无数次到底网站上的图标是如何更改颜色的,我甚至曾想到它是使用颜色彩笔动态创建的矢量图形,当然结果你也知道了,肯定不是这样的,下面我来告诉大家事实的真像。

  我们在网站看到的图片可以像文字一样随意改变颜色的图形,其实它本身就是一种文字,只不过这些文字并不是我们平常所使用的各种字体的文字,它是一种图标文字,是设计师们使用“专用字符编辑程序”而创建的图标字体。这样我们就可以使用CSS更改所谓的图片(即图标文字)的颜色。

  1. <div class="smail">
  2. <em class="status">我很高兴 </em>
  3. <em class="status unHappy"> 哥很忧郁</em>
  4. </div>
  1. .status:BEFORE {
  2. color: red;
  3. content: "☺";
  4. font-size: 22px;
  5. font-style: normal;
  6. left: 0;
  7. position: absolute;
  8. top: 8px;
  9. text-align: center;
  10. width: 21px;
  11. }
  12. .status {
  13. display: block;
  14. font-size: 11px;
  15. line-height: 12px;
  16. margin-bottom: 20px;
  17. padding: 2px 0 2px 26px;
  18. position: relative;
  19. }
  20. .unHappy:before {
  21. content: "☹";
  22. color: blue;
  23. font-size: 22px;
  24. }

  结束语:很多复杂的事情,其实本是很简单的事,只是我们想的复杂了,所以就把事情处理的复杂了。

使用CSS更改图标的颜色的更多相关文章

  1. 用PS修改PNG格式图标的颜色

    需求:将黑色的PNG格式图标,更改为其它颜色 原始图标:   原始图标 - 黑色   方法1: 图层样式 -> 颜色叠加     选择颜色叠加     选择想要的颜色   方法2: 更换颜色 一 ...

  2. android:更改PagerTabStrip背景颜色,标题字体样式、颜色和图标,以及指示条的颜色

    1.更改PagerTabStrip背景颜色 我们直接在布局中设置background属性可以: <android.support.v4.view.ViewPager android:id=&qu ...

  3. CSS字体图标

    一.什么是字体图标: 1. 字体图标可以和图片一样改变透明度,旋转度,等等 2.本质是文字,可以改变大小颜色等等比较适用于移动端 总结;图标字体具有矢量效果,放大缩小不失真,而且可以使用CSS任意更改 ...

  4. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  5. css字体图标的使用方法

    提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背 ...

  6. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  7. easyui tree 更改图标

    easyui tree 更改图标 ,onLoadSuccess: function (node, data) { $('#tt .tree-icon').css("background&qu ...

  8. css字体图标的制作和使用。

    css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...

  9. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

随机推荐

  1. Python基础之文件处理、函数、内置函数 (三)

    内置函数 一 详细见python文档,请点击 文件操作 操作文件时,一般需要经历如下步骤: 打开文件 操作文件 一.打开文件 文件句柄 = file('文件路径', '模式') 注:python中打开 ...

  2. 「Python」socket指南

    开始 网络中的 Socket 和 Socket API 是用来跨网络的消息传送的,它提供了 进程间通信(IPC) 的一种形式.网络可以是逻辑的.本地的电脑网络,或者是可以物理连接到外网的网络,并且可以 ...

  3. Codeforces 221 E. Little Elephant and Shifts

    E. Little Elephant and Shifts time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  4. IE6+IE7+IE8+IE9+FF兼容性调试

    HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同) 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF ...

  5. Oracle数据库语句

    Oracle数据库语句 ORACLE支持五种类型的完整性约束 NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值. CHEC ...

  6. 【leetcode 简单】第九题 移除元素

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  7. 搭建自己的PHP框架心得——转载

    原文:http://www.cnblogs.com/zhenbianshu/p/5331165.html 前言 说到写PHP的MVC框架,大家想到的第一个词--“造轮子”,是的,一个还没有深厚功力的程 ...

  8. spring boot 自定义属性覆盖application文件属性

    参考 Spring boot源码分析-ApplicationListener应用环境: https://blog.csdn.net/jamet/article/details/78042486 加载a ...

  9. Java企业级电商项目架构演进之路 Tomcat集群与Redis分布式

    史诗级Java/JavaWeb学习资源免费分享 欢迎关注我的微信公众号:"Java面试通关手册"(坚持原创,分享各种Java学习资源,面试题,优质文章,以及企业级Java实战项目回 ...

  10. Mysql储存过程7: case

    #用在储存过程中: create procedure k() begin declare number int; )); case number then select '>0'; else s ...