如何在cssicon中找到自己想要的

html-css08

如何在cssicon中找到自己想要的,第1张

首先，打开CSSIcon网站，在搜索框中输入关键字，可以查找到相关的图标，也可以通过分类查找，比如社交媒体、电子邮件、购物等，还可以通过标签查找，比如箭头、锁、礼物等，这样就可以找到自己想要的图标了。

需要知道，计算机里面每个字符都有一个unicode编码,比如「我」的unicode是6211（16进制），而字体文件的作用是规定某个字符应该用什么形状来显示。unicode字符集里面，E000 至 F8FF属于用户造字区。原本是空的，用户可以在字体文件里面随便定义这些字符的形状。我们所见的webfont icon，一般就选在这一部分。（上面这段讲得可能不专业，大致知道是这么一回事就行。）要使用自定义字符，大致步骤是：自己造一个字体文件，把e000所对应的字符形状画上新浪的icon，保存为常用字体文件格式。在css中使用font-face引用这个字体文件，任意命名（不和已有的重复，比如叫myfonticon）需要显示图标的地方定义font-family为myfonticon，content属性设为"\e000"。

html代码部分

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图标写法</title>

</head>

<body>

<div id="icon">

<span class="price">&#6550989.0</span>

  <a href="#" class="btn">去开团&nbsp&gt</a>

</div>

</body>

</html>

下面是css代码部分,处理了浏览器的兼容

<style>

#icon{display:inline-block}

.price{display:inline-blockbackground:#E60012font-size:40pxcolor:#ffffloat:leftpadding:0px 60pxheight:86pxline-height:86px-moz-border-radius-topleft:43px-moz-border-radius-bottomleft: 43px-webkit-border-top-left-radius:43px-webkit-border-bottom-left-radius:43pxborder-top-left-radius:43pxborder-bottom-left-radius:43px}

.btn{display:inline-blockbackground:#000font-size:40pxcolor:#ffftext-decoration:nonefloat:leftpadding:0px 60pxheight:86pxline-height:86px-moz-border-radius-topright:43px-moz-border-radius-bottomright: 43px-webkit-border-top-right-radius:43px-webkit-border-bottom-right-radius:43pxborder-top-right-radius:43pxborder-bottom-right-radius:43px}

</style>

效果图