Icons Tutorial
How To Add Icons
To insert an icon, add the name of the icon class to any inline HTML element.
这 <i> 和<span> elements are widely used to add icons.
All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
Font Awesome 5 Icons
To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.
Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.
笔记： 无需下载或安装！
例子
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/你的代码.js" crossorigin="anonymous"></script>
<!--Get your code at fontawesome.com-->
</head>
<body>
<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>
</body>
</html>
亲自尝试 »
Font Awesome 4 Icons
To use the Font Awesome 4 icons, add the following line inside the <head> section of your HTML page:
笔记： 无需下载或安装！
例子
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
亲自尝试 »
Bootstrap 3 Icons
To use the Bootstrap 3 glyphicons, add the following line inside the <head> section of your HTML page:
笔记： 无需下载或安装！
例子
<!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>
亲自尝试 »笔记： Glyphicons are not supported in Bootstrap 4.
For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.
Google Icons
To use the Google icons, add the following line inside the <head> section of your HTML page:
笔记： 无需下载或安装！
例子
<!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>
亲自尝试 »
For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.
