iconfont 图标库使用方法总结

最新推荐文章于 2024-09-03 16:22:30 发布

lucky123star

最新推荐文章于 2024-09-03 16:22:30 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/lucky123star/article/details/78808083

版权

方法1：使用在线链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@font-face {
font-family: 'iconfont'; /* project id 444753 */
src: url('https://at.alicdn.com/t/font_444753_3bdwpst82jfw29.eot');
src: url('https://at.alicdn.com/t/font_444753_3bdwpst82jfw29.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_444753_3bdwpst82jfw29.woff') format('woff'),
url('https://at.alicdn.com/t/font_444753_3bdwpst82jfw29.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_444753_3bdwpst82jfw29.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont";
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
padding-left:20px;
}

</style>

</head>
<body>




</body>
</html>

方法2：下载到本地 demo_fontclass.html（打开该文件找到对应的class）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="play/iconfont.css">
</head>
<body>




</body>
</html>