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

html-css010

如何使用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>生成如下效果图。

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

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

需要知道,计算机里面每个字符都有一个unicode编码,比如「我」的unicode是6211(16进制),而字体文件的作用是规定某个字符应该用什么形状来显示。

unicode字符集里面,E000 至 F8FF属于用户造字区。原本是空的,用户可以在字体文件里面随便定义这些字符的形状。我们所见的webfont icon,一般就选在这一部分。

(上面这段讲得可能不专业,大致知道是这么一回事就行。)

要使用自定义字符,大致步骤是:

自己造一个字体文件,把e000所对应的字符形状画上新浪的icon,保存为常用字体文件格式。

在css中使用font-face引用这个字体文件,任意命名(不和已有的重复,比如叫myfonticon)

需要显示图标的地方定义font-family为myfonticon,content属性设为"\e000"。

在html中使用图标字体的方法:

1、创建自己的iconfont,推荐使用iconmoon,使用它可以通过上传SVG或者字体来生成你需要的icon字体,本文在线演示使用iconmoon生成。

步骤1:选择页面提供的或者上传自己的

步骤2:指定字符映射

3、导入到页面使用css:

style.css写法如下:

 @font-face

{

 

 

 

 font-family:

'icomoon'

 

 

 

 src:url('fonts/icomoon.eot')

 

 

 

 src:url('fonts/icomoon.eot?#iefix')

format('embedded-opentype'),

 

 

 

 

 

 url('fonts/icomoon.woff')

format('woff'),

 

 

 

 

 

 url('fonts/icomoon.ttf')

format('truetype'),

 

 

 

 

 

 url('fonts/icomoon.svg#icomoon')

format('svg')

 

 

 

 font-weight:

normal

 

 

 

 font-style:

normal

 

 }