CSS _ CSS 图标

CSS 图标

如何添加图标？

网上有很多第三方的图标库，诸如Font Awesome、Bootstrap、Google Icons等。在<head>部分中引入第三方图标库的文件，然后在文档中需要插入图标的地方以<i>或<span>标签插入相应图标即可。

本节所涉及外部库大多服务器在海外，因为特殊原因，可能会访问速度缓慢或者访问失败。

插入Font Awesome库的图标

如下所示：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-car"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-smile"></i>
<i class="fa fa-dog"></i>

</body>
</html>

运行一下

插入Bootstrap的图标

如下所示：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://sand-box.cn/static/css/bootstrap.min.css">
</head>
<body class="container">

<i class="glyphicon glyphicon-glass"></i>
<i class="glyphicon glyphicon-pencil"></i>
<i class="glyphicon glyphicon-envelope"></i>
<span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>

</body>
</html>

运行一下

插入Google Icons的图标

如下所示：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">face</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

运行一下

CSS 图标

推广