前端的学习之路：初级CSS---图标字体的其他使用方式
程序员文章站
2022-05-10 11:02:31
...
图标字体的其他使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图标字体的其他使用方式</title>
<!-- <link rel="stylesheet" href="../chujicss/css/11.23.02.css"> -->
<style>
/*
通过为元素来设置图标字体
1、找到要设置图标的元素通过bafore或after选中
2、再content中设置字体的编码
3、设置字体的样式
fab:
font-family:'Font Awesome 5 Brands'
fas:
font-family:'Font Awesome 5Free'
font-weight:900;
*/
li::before{
content: '\f1b0';
font-family: 'Font Awesome 5Free';
font-weight: 900;
color: red;
margin-left: 10px;
}
</style>
</head>
<body>
<ul>
<li>天津</li>
<li>北京</li>
<li>上海</li>
<li>厦门</li>
</ul>
<!--
通过实体来使用图标字体：
&#x图标的编码;
-->
<span class="fas"></span>
</body>
</html>
运行结果为：
上一篇： 前端的学习之路：初级CSS---伪元素