如何使用CSS设置标签的背景小图标 简单

html-css029

如何使用CSS设置标签的背景小图标 简单,第1张

需要把图标换成字体图标,阿里巴巴图标库可以把图标转成字体图标,自定义的图标需要用svg然后转换。

下载出来引用字体图标样式。在样式表中引用字体图标

@font-face {

font-family: "aui_iconfont"

src: url('aui-iconfont.2.0.ttf') format('truetype')

}//字体引用方式

arrow-left:before { content: "\e6eb"}//字体图标的命名和生成的字体

把字体图标的命名引用到对应的div即可<div class="aui-iconfont aui-icon-left"></div>生成如下效果图。

可以使用背景图设置,使用背景精灵图 把图标放在一张图片上面,通过定位位移来找到图片。

切成小图标 一个位置对应一个图标。

<!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" 这个样式自己修改,放自己的图片。这里我只是给你举个例子。

这段css代码用到了伪类:before和IcoMoon App在线生成图标,也就是你后边问的\e600这些。看你这个代码,应该是生成了一些小图标,左右箭头之类的。

可以参考下边这个文章,里边有详细的讲IcoMoon App 看到后边你就全明白了。

参考资料:http://www.yaohaixiao.com/?p=2453