html li标签前面添加图标三种方法

今天无聊写下这个例子,希望对初学者有帮助,代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.min.css">
		<!--如果是IE7将自动加载这一句-->
		<!--[if IE 7]>
		<link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome-ie7.min.css">
		<![endif]-->
		<style type="text/css">
		body, div, ul, li {
			padding: 0px;
			margin: 0px;
			font-size: 15px;
		}
			.first {
				list-style: none;
				list-style-image: url("star.gif");
				padding-left: 20px;
			}
			.second li{
				list-style: none;
				background: url("star.gif") no-repeat;
				padding-left: 20px;
			}
			.third {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<h2>第一种:list-style-image(图片)</h2>
		<ul class="first">
			<li>阿斯大法</li>
			<li>阿斯大法</li>
			<li>阿斯大法</li>
		</ul>
		<h2>第二种:backgroud(图片)</h2>
		<ul class="second">
			<li>阿斯大法</li>
			<li>阿斯大法</li>
			<li>阿斯大法</li>
		</ul>
		<h2>第三种:Font-Awesome-3.2.1(字体库)</h2>
		<ul class="third">
			<li><i class="icon-star"></i>阿斯大法</li>
			<li><i class="icon-star"></i>阿斯大法</li>
			<li><i class="icon-star"></i>阿斯大法</li>
		</ul>
	</body>
</html>

本人写的deme下载地址:http://download.csdn.net/detail/u010095549/9320861

效果如图:

欢迎加入,Java,前端的共同学习【爱问共享编程部落】 479668591

原文地址:https://www.cnblogs.com/guxingzhe/p/5014233.html