我们经常在很多网站上见到更改网站的主题时,图标的颜色也改变了,我们总是觉的这一项功能非常伟大,因为我们知道使用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. C ------ static 关键字的作用

    首先要理解生存周期与作用域的区别: 生存周期: 变量从定义到销毁的时间范围.存放在全局数据区的变量的生存周期存在于整个程序运行期间,而存放在栈中的数据则随着函数等的作用域结束导致出栈而销毁,除了静态变 ...

  2. 基于javaWeb阶段下的Cookie和Session总结

    1. 会话技术   就是用户在使用浏览器浏览界面的时候,去访问多个页面后一次性关闭浏览器,这个过程叫会话,学习会话技术就是在客户端与服务器进行交互的时候为了能更好的保存数据.在java中会话技术只有C ...

  3. linux shell学习四

    Shell分支语句 case 值 in 模式1) command1 command2 command3 ;; 模式2) command1 command2 command3 ;; *) command ...

  4. 前端PHP入门-017-系统内置函数-会查阅API

    大家要知道未来这就是你的工具 如果代码能赚钱,帮你赚钱最多的是基本语法 如果你还在当程序员,你最好的伙伴就是手册 问问你自己:你有CSS2.0/3.0手册,JavaScript手册,Jquery手册, ...

  5. openstack日志模块

    一.简单的python日志模块介绍 http://www.cnblogs.com/tuzkee/p/3974193.html http://blog.csdn.net/jgood/article/de ...

  6. Knockout双向绑定

    knockout双工绑定基于 observe 模式,性能高.核心就是observable对象的定义.这个函数最后返回了一个也叫做 observable 的函数,也就是用户定义值的读写器(accesso ...

  7. python3爬虫.2.伪装浏览器

    有的网页在爬取时候会报错返回 urllib.error.HTTPError: HTTP Error 403: Forbidden 这是网址在检测连接对象,所以需要伪装浏览器,设置User Agent ...

  8. 项目记录 -- config2html 理解

    html 代码: <table width=1280 border=0 cellspacing=1 cellpadding=1> <tr id=tblhdr> <td&g ...

  9. discuz2.5登录后台闪退的解决办法

    今天突然发现discuz2.5论坛后台进不去,开始以为密码错了,但发现登录后也是闪退.我试着清除浏览器cookie,也换了其他浏览器也没有用,还是上网找找吧! discuz2.5进入后台闪退的原因: ...

  10. 离线下载pip包进行安装【转】

    Host-A 不能上网,但是需要在上面安装Python-package 通过另外一台能上网的Host-B主机 1. 下载需要离线安装的Packages 在Host-B上执行如下命令: 安装单个Pack ...