怎么给css 图标字体添加新的图标

html-css011

怎么给css 图标字体添加新的图标,第1张

　在文字右边加图标，参考代码如下：

<input class='phone-input' type="text" id="phone"/>

.phone-input{

padding-right:20px

background:url("resource/***.gif") no-repeat scroll right center transparent

}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>input 框前面放图片</h2>

<div>

<span class="glyphicon glyphicon-zoom-in"></span><input type="text"/>

</div>

</div>

</body>

</html>

引入bootstrap中css样式，如果图标不是你想要的，你可以根据class="glyphicon glyphicon-zoom-in" 这个样式自己修改，放自己的图片。这里我只是给你举个例子。

这个很简单，我来教你：

<body>

<p>提问百度知道</p>

</body>

<style>

p{ font-size:16pxline-height:2background:url(...你要加的图片) no-repeat left centerbackground-size:16pxpadding-left:20%} //'padding-left:20%'这个值是不固定的，看你图片多大

</style>

如有疑问可以追问我，望采纳