<ul>
<li class="ico1"></li>
<li class="ico2"></li>
<li class="ico3"></li>
<li class="ico4"></li>
</ul>
<style type="text/css">
.ico1{
background: url(huise-ico1)
}
.ico1:hover{
background: url(chengse-ico1)
}
</style>
这边我只写了一个。还有3个没写。你可以根据这个改上自己需要的。
PS：还有一种跟快捷的方法，如果你有兴趣的话，可以去搜索下iconfont。不懂可以再问我
在网站看到的图片可以像文字一样随意改变颜色的图形，其实它本身就是一种文字，只不过这些文字并不是我们平常所使用的各种字体的文字，它是一种图标文字，是设计师们使用“专用字符编辑程序”而创建的图标字体，这样就可以使用CSS更改所谓的图片（即图标文字）的颜色。
[html] view plaincopyprint?<div class="smail">
<em class="status">我很高兴 </em>
<em class="status unHappy"> 忧郁</em>
</div> .status:BEFORE {
color: red
content: "☺"
font-size: 22px
font-style: normal
left: 0
position: absolute
top: 8px
text-align: center
width: 21px
}
.status {
display: block
font-size: 11px
line-height: 12px
margin-bottom: 20px
padding: 2px 0 2px 26px
position: relative
}
.unHappy:before {
content: "☹"
color: blue
font-size: 22px
}
css中font字体颜色的设置方法：可以用“color”属性来设置css中font字体的颜色。
color 属性规定文本的颜色。
这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
要设置一个元素的前景色，最容易的方法是使用 color 属性。
1、在没有加“color”属性前，字体颜色是默认的颜色，黑色；
2、加上“color”属性以后，字体变成红色。
扩展资料：
font：字体。在微机系统里通常用“fonts”文件夹存放已安装的字体，自己安装字体时，也需要装入“fonts”文件夹中。
第一种声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
语法
font: [ [<'font-style'>||<'font-variant'>||<'font-weight'>]?<'font-size'>[ /<'line-height'>]?<'font-family'>] | caption | icon | menu | message-box | small-caption | status-bar |inherit
参数
该属性是复合属性。第一种声明方式请参阅各参数对应的属性；
第二种声明方式中的参数属于CSS2；
caption: 使用有标题的系统控件的文本字体（如按钮，菜单等）；
icon : 使用图标标签的字体；
menu: 使用菜单的字体；
message-box : 使用信息对话框的文本字体；
small-caption : 使用小控件的字体；
status-bar : 使用窗口状态栏的字体。
说明
设置或检索对象中的文本特性。该属性是复合属性。
对于如何使用用户端系统可能没有的字体，可以参阅@font-face规则。
对应的脚本特性为font。请参阅我编写的其他书目。
示例
p {font: italic small-caps 600 12pts/18pts宋体}
p { font: italic small-caps 600 12pts/150% Courier}
p { font: italic small-caps 600 12pts/1.5 Courier}
p { font: italic small-caps 600 12pts/18pts Courier}
p {font: /18pts serif}
H1 {font:italic bold 15pt/17pt Arial}
参考资料：百度百科-font
