【CSS学习笔记14】-图标icon
2023-10-11 本文已影响0人
兔小小
通过使用图标库，可以轻松地将图标添加到 HTML 页面。
如何添加图标
将图标添加到 HTML 页面的最简单方法是使用图标库， 比如字体真棒。
将指定图标类的名称添加到任何内联 HTML 元素（如 或 ）。<i><span>
下面图标库中的所有图标都是可扩展的矢量，可以 使用 CSS 自定义（大小、颜色、阴影等）
字体图标
要使用字体很棒图标，请转到 fontawesome.com，登录并获取要在 HTML 页面部分添加的代码：
<script src="https://kit.fontawesome.com/*yourcode*.js" crossorigin="anonymous"></script>
阅读更多关于如何在我们的字体中开始使用字体图标的信息 字体图标 教程。
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
引导图标
要使用引导程序字形，请在 HTML 页面的部分内添加以下行：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
好像用不了orz
谷歌图标
要使用 Google 图标，请在 HTML 页面的分区中添加以下行：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</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>
