iconfont的简单使用

最新推荐文章于 2023-09-14 15:36:19 发布

weixin_33912246

最新推荐文章于 2023-09-14 15:36:19 发布

阅读量125

点赞数

原文链接：https://juejin.im/post/5cc5b31bf265da036505052a

版权

到iconfont.cn选择需要的icon，登陆后加入购物车

然后点击购物车添加或新建到一个项目，打开项目，点击下载到本地

解压下载好的压缩包，在你的项目中导入需要的文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css">
	<style type="text/css">
		header::after {
			font-family: 'iconfont';
			/*content: '&#xe77f;'; error */
			content: '\e77f';
		}
	</style>
</head>
<body>
	<header>header</header>
	<footer>
		<span class="iconfont icon-frown"></span>
		footer
	</footer>
</body>
</html>复制代码

可以用css伪元素选择器，来填充iconfont，但需注意content属性值与官网提供的有差距

也可以给标签添加类名，需注意添加默认类型iconfont

最终效果：

weixin_33912246

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iconfont的简单使用

到iconfont.cn选择需要的icon，登陆后加入购物车然后点击购物车添加或新建到一个项目，打开项目，点击下载到本地解压下载好的压缩包，在你的项目中导入需要的文件<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link ...
复制链接

扫一扫