使用字体图标

时间:2021-12-08 18:01:13

使用字体图标分为两种,一种直接在html页面中写入。一种是在css样式表中写入。
以下的代码用以简单说明:
1. 在html页面中使用十分简单,直接在标签内写就行。例如:&#10152。需要在数字前面加上"&#"其它常用字体图标
2. 在css样式表中写,需要用到before或者after伪元素配合content属性来实现。需要在数字前边加上"/"转义符。

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
//
.arow:before {
content: "\21E0";
}

</style>
</head>
<body>
<h1>&#10152</h1>
<span class="arow">

</span>

<span id="aa">

</span>
</body>

以上是html自带的字体图标,如果不够用或者觉着 不是那么好看,也可以使用Bootstrap自带的字体图标。相关链接在这儿