CSS 字前面插入图标的代码

html-css021

CSS 字前面插入图标的代码,第1张

首先这是个li标签，在li里面，有个装图片的b标签，再给个span写字，然后给它们各自定位即可。

具体代码<li style="position:relative"><b style="width:13pxheight:13pxbackground:url(images/1.jpg) no-repeatdisplay:blockposition:absoluteleft:0pxtop:0px"></b><span style="margin-left:20px">哈哈</span></li>

具体情况距离自己调，图片一定要给宽和高。

html代码部分

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图标写法</title>

</head>

<body>

<div id="icon">

<span class="price">&#6550989.0</span>

  <a href="#" class="btn">去开团&nbsp&gt</a>

</div>

</body>

</html>

下面是css代码部分,处理了浏览器的兼容

<style>

#icon{display:inline-block}

.price{display:inline-blockbackground:#E60012font-size:40pxcolor:#ffffloat:leftpadding:0px 60pxheight:86pxline-height:86px-moz-border-radius-topleft:43px-moz-border-radius-bottomleft: 43px-webkit-border-top-left-radius:43px-webkit-border-bottom-left-radius:43pxborder-top-left-radius:43pxborder-bottom-left-radius:43px}

.btn{display:inline-blockbackground:#000font-size:40pxcolor:#ffftext-decoration:nonefloat:leftpadding:0px 60pxheight:86pxline-height:86px-moz-border-radius-topright:43px-moz-border-radius-bottomright: 43px-webkit-border-top-right-radius:43px-webkit-border-bottom-right-radius:43pxborder-top-right-radius:43pxborder-bottom-right-radius:43px}

</style>

效果图