字体图标的使用

最新推荐文章于 2023-02-18 21:00:00 发布

水沉草木

最新推荐文章于 2023-02-18 21:00:00 发布

阅读量113

点赞数

文章标签： css sass html

本文链接：https://blog.csdn.net/qq_69761234/article/details/124948793

版权

在网页中会经常碰到文字前附带图标类似于这样的

这是可以使用阿里巴巴矢量图标库引入这写个图标

搜索需要的图标把它加入购物车，然后下载下来，下载解压之后就是引用了，一共有三种方法

第一种：这种引用较为繁琐，如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			@font-face {
		  font-family: 'iconfont';
		  src: url('font/iconfont.woff2?t=1652751394334') format('woff2'),
		       url('font/iconfont.woff?t=1652751394334') format('woff'),
		       url('font/iconfont.ttf?t=1652751394334') format('truetype');
			}
			
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
			.meishi{
				font-size: 36px;
				color: red;
			}
			.meishi2{
				font-size: 36px;
				color: green;
			}
		</style>
		
	</head>
	<body>
		<span class="iconfont meishi">&#xe608;</span>
		<span class="iconfont meishi2">&#xe63b;</span>
		
	</body>
</html>

第二种：是把第一种CSS样式直接写好，然后直接引用CSS文件，如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="iconfont.css">
		<style type="text/css">
			.icon-fangdajing{
				font-size: 36px;
				color: green;
			}
		</style>
	</head>
	<body>
		<span class="iconfont icon-fangdajing"></span>
	</body>
</html>

第三种：前两种的引用图标字体都是灰色，这种引用引入后可以把原本图标的颜色一起引入进来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./iconfont.js"></script>
		<style>
		.icon {
		  width: 1em;
		  height: 1em;
		  vertical-align: -0.15em;
		  fill: currentColor;
		  overflow: hidden;
		  
		  font-size: 360px;
		
		}
		</style>
	</head>
	<body>
		<svg class="icon" aria-hidden="true">
		  <use xlink:href="#icon-meishi1"></use>
		</svg>
		<svg class="icon" aria-hidden="true">
		  <use xlink:href="#icon-meishi"></use>
		</svg>
	
	</body>
</html>

水沉草木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体图标的使用

在网页中会经常碰到文字前附带图标类似于这样的这是可以使用阿里巴巴矢量图标库引入这写个图标搜索需要的图标把它加入购物车，然后下载下来，下载解压之后就是引用了，一共有三种方法第一种：这种引用较为繁琐，如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
复制链接

扫一扫