【CSS图标用法详细指南（+代码示例）】可以使用图标库将图标添加到我们的HTML页面。库中的所有图标都可以使用CSS设置格式。可以根据大小, 颜色, 阴影等进行自定义。
图标库的类型：
- Font Awesome图标
- Google图标
- Bootstrap图标
Font Awesome图标：要使用"Font Awesome图标", 请在< head> 部分中添加以下链接。
<
link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
示例1：
<
!DOCTYPE>
<
html>
<
head>
<
link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<
/head>
<
body>
<
h1>
lsbin
<
/h1>
<
i class = "fa fa-cloud" style = "font-size:32px;
">
<
/i>
<
i class = "fa fa-heart" style = "font-size:32px;
">
<
/i>
<
i class = "fa fa-file" style = "font-size:32px;
">
<
/i>
<
i class = "fa fa-car" style = "font-size:32px;
">
<
/i>
<
i class = "fa fa-bars" style = "font-size:32px;
">
<
/i>
<
/body>
<
/html>
输出如下：
示例2：
<
!DOCTYPE>
<
html>
<
head>
<
link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<
/head>
<
body>
<
h1>
lsbin
<
/h1>
<
i class = "fa fa-heart" style = "font-size:28px;
color:red;
">
<
/i>
<
i class = "fa fa-heart" style = "font-size:30px;
color:blue;
">
<
/i>
<
i class = "fa fa-heart" style = "font-size:32px;
color:red;
">
<
/i>
<
i class = "fa fa-heart" style = "font-size:34px;
color:blue;
">
<
/i>
<
i class = "fa fa-heart" style = "font-size:36px;
color:red;
">
<
/i>
<
/body>
<
/html>
输出如下：
Google图标：要使用Google图标, 请在< head> 部分中添加以下链接。
<
link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
示例1：
<
!DOCTYPE>
<
html>
<
head>
<
link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<
/head>
<
body>
<
h1>
lsbin
<
/h1>
<
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>
输出如下：
示例2：
<
!DOCTYPE>
<
html>
<
head>
<
link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<
/head>
<
body>
<
h1>
lsbin
<
/h1>
<
i class = "material-icons" style = "font-size:30px;
">
cloud<
/i>
<
i class = "material-icons" style = "font-size:40px;
">
cloud<
/i>
<
i class = "material-icons" style = "font-size:50px;
">
cloud<
/i>
<
i class = "material-icons" style = "font-size:60px;
">
cloud<
/i>
<
i class = "material-icons" style = "font-size:70px;
">
cloud<
/i>
<
/body>
<
/html>
输出如下：
Bootstrap程序图标：要使用Bootstrap图标, 请在< head> 部分中添加以下链接。
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
示例1：
<
!DOCTYPE>
<
html>
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<
/head>
<
body>
<
h1>
lsbin
<
/h1>
<
i class = "glyphicon glyphicon-cloud" style = "font-size:28px;
">
<
/i>
<
i class = "glyphicon glyphicon-user" style = "font-size:30px;
">
<
/i>
<
i class = "glyphicon glyphicon-thumbs-up" style = "font-size:32px;
">
<
/i>
<
i class = "glyphicon glyphicon-remove" style = "font-size:34px;
">
<
/i>
<
i class = "glyphicon glyphicon-envelope" style = "font-size:36px;
">
<
/i>
<
/body>
<
/html>
输出如下：
示例2：
<
!DOCTYPE>
<
html>
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<
/head>
<
body>
<
h1>
lsbin
<
/h1>
<
i class = "glyphicon glyphicon-thumbs-up" style = "font-size:20px;
">
<
/i>
<
i class = "glyphicon glyphicon-thumbs-up" style = "font-size:30px;
">
<
/i>
<
i class = "glyphicon glyphicon-thumbs-up" style = "font-size:40px;
">
<
/i>
<
i class = "glyphicon glyphicon-thumbs-up" style = "font-size:50px;
">
<
/i>
<
i class = "glyphicon glyphicon-thumbs-up" style = "font-size:60px;
">
<
/i>
<
/body>
<
/html>
输出如下：
推荐阅读
- Python sorted()检查两个字符串是否为字谜
- 算法题（整数流中的中位数(运行的整数)）
- 算法题（大于Y且数字总和等于X的最小数字）
- JavaScript数学对象Math完整参考
- 如何使用Python在OpenCV中读取图像（代码实现）
- CSS如何使用3D变换（代码示例）
- 在只允许使用2位数字(4和7)的序列中查找第n个元素|S2 (log(n)方法)
- Western Digital面向经验分享| FTE招聘校园
- 如何从给定的C/C++程序中删除注释（）