css中是怎么自己生成矢量图标的

html-css026

css中是怎么自己生成矢量图标的,第1张

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

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

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

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

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

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

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

去bootcss网站上下载一个看一下就明白了,让别人讲你自己也要了解下。

.icon-cart:before {

content: "\e623"

}

.icon-cart:after {

content: "\e623"

}

都可以

\e623 就是对应的你要插入的那个字体图标的编号