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

Posted 2023-03-29

需要把图标换成字体图标,阿里巴巴图标库可以把图标转成字体图标，自定义的图标需要用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>生成如下效果图。

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

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

参考技术A

可以用background属性，假设需要给 a 标签加一个背景小图标，则有：

a background: url(小图标路径.png) left center no-repeat;

input如何添加图标

 

代码：<input type="text" class="user" />

 

设置class类属性，添加小图标。创建<style>标签，然后在这个标签里面设置user样式。

   1.使用background-image设置input背景图片；

   2.background-size设置背景图片的大小；

  3.background-position设置背景图片的位置；

  4.background-repeat设置背景图片不重复；

  5.padding设置图片的内边距。

 

css样式代码：

<style type="text/css">

 .user

 　　background-image: url(img/user.png);/*设置小图标*/

　　background-size: 25px 25px;/*小图标的大小*/

　　background-position: 5px 4px;/*小图标在input的位置*/

　　background-repeat: no-repeat;/*背景小图标不重复*/

　　padding: 8px 10px 8px 40px;/*设置input内边距*/

　　/*设置input样式好看*/

　　border:1px solid #ddd;

　　margin: 30px;

　　width: 220px;

</style>