上周整理了一篇小程序中如何使用字体图标,昨天朋友问我普通页面如何使用svg并改变颜色,今天就整理一下,都很简单
首先依旧是打开 字体图标库 https://icomoon.io :
下载完成后解压:
代码如下:
注意: 字体图标就像文字一样,用font-size设置大小,color设置颜色,其他样式均可自定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html中使用svg字体图标</title>
<!-- 引用icon样式文件 -->
<link rel="stylesheet" href="./css/style.css">
<style>
/* 字体图标就像文字一样,用font-size设置大小,color设置颜色,其他样式均可自定义 */
.icon-site {
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<div>
<span class="icon-site"></span>
</div>
</body>
</html>
效果:
网页中使用svg可以优化页面,减小项目体积,并且一些logo为了保证它在各种屏幕分辨率都清晰,也会选用svg制作,样式方面,一般操作文字的样式,例如一些渐变的样式svg的图标也可以做到哦。