CSS引入阿里iconfont图标步骤
程序员文章站
2024-02-14 23:59:34
...
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;}
挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">字体编码</i>
全部代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
@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;}
</style>
</head>
<i class="iconfont"></i>
<body>
</body>
</html>
运行结果
参考
https://www.iconfont.cn/help/detailspm=a313x.7781069.1998910419.d8d11a391&helptype=code