html如何添加阿里图标,CSS引入阿里iconfont图标步骤

CSS引入阿里iconfont图标步骤

第一步

选择图标，选择添加入库

第二步

没有项目就新建一个项目

下载项目文件，复制粘贴到你的WEB项目目录中

回到网页，点击查看在线链接

复制代码到你的index.html

定义使用iconfont的样式

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;}

挑选相应图标并获取字体编码，应用于页面

字体编码

全部代码如下

@font-face {

font-family: 'iconfont'; /* project id 1224085 */

src: url('//at.alicdn.com/t/font_1224085_j2ohhwz3z9.eot');

src: url('//at.alicdn.com/t/font_1224085_j2ohhwz3z9.eot?#iefix') format('embedded-opentype'),

url('//at.alicdn.com/t/font_1224085_j2ohhwz3z9.woff2') format('woff2'),

url('//at.alicdn.com/t/font_1224085_j2ohhwz3z9.woff') format('woff'),

url('//at.alicdn.com/t/font_1224085_j2ohhwz3z9.ttf') format('truetype'),

url('//at.alicdn.com/t/font_1224085_j2ohhwz3z9.svg#iconfont') format('svg');

}

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;}



运行结果

参考

https://www.iconfont.cn/help/detailspm=a313x.7781069.1998910419.d8d11a391&helptype=code