如何用css做这个图标

可以在阿里图库下载相应图标，本地下载。

第一步:复制项目下生成的字体。

@ font-face { font-family:& # 39；iconfont & # 39；

src:URL(& # 39；iconfont.eot & # 39);

src:URL(& # 39；iconfont.eot？# iefix & # 39)格式(& # 39；嵌入式-opentype & # 39；),

网址(& # 39；iconfont.woff & # 39)格式(& # 39；woff & # 39),

网址(& # 39；iconfont.ttf & # 39)格式(& # 39；truetype & # 39),

网址(& # 39；icon font . SVG # icon font & # 39；)格式(& # 39；svg & # 39);

}

步骤2:使用iconfont定义样式。

。iconfont{

字体系列:& quoticonfont & quot！重要；

字体大小:16px字体样式:正常；

-webkit-font-smoothing:抗锯齿；

-WebKit-text-stroke-width:0.2 px；

-moz-osx-font-smoothing:灰度；}

第三步:选择相应的图标，获取字体代码并应用到页面。

& lt我认为。iconfont & quot& gt& amp# x33& lt/I & gt；

字体类别参考

Font-class是unicode用法的变体，主要解决unicode书写不直观，含义不明确的问题。

与unicode用法相比，它有以下特点:

兼容性好，支持ie8

，以及所有现代浏览器。

与unicode相比，语义清晰，书写更直观。你可以很容易地看出这个图标是什么。

因为class是用来定义图标的，所以当你想替换图标时，只需要修改class中的unicode引用即可。

但是因为本质上是使用的字体，所以仍然不支持多色图标。

使用步骤如下:

步骤1:复制项目下生成的fontclass代码:

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

步骤2:选择相应的图标并获取类名，然后将其应用到页面:

<i class="iconfont icon-xxx"></i>