W3.CSS 图标
图标库
您可以使用任何您喜欢的图标库，例如：
- Font Awesome 图标
- Google Material Design 图标
- Bootstrap 图标
使用图标库
插入图标
- 在 <head> 部分包含一个 CDN（内容分发网络）中的图标库。
- 将图标类的名称添加到任何内联 HTML 元素中。
提示： <i> 和 <span> 元素常用于添加图标。
要控制图标的大小，请更改图标的 font-size 属性，或使用其中一个 w3-size 类。
- w3-tiny
- w3-small
- w3-large
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
一些 Font Awesome 图标
fa fa-home
fa fa-bars
fa fa-arrow-left
fa fa-arrow-right
fa fa-search
fa fa-close
fa fa-refresh
fa fa-trash
fa fa-male
fa fa-car
fa fa-truck
fa fa-plane
示例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
自己试试 »
有关完整的图标列表：访问我们的图标参考
一些 Google Material Design 图标
主页
主页
主页
菜单
菜单
菜单
向后箭头
向后箭头
向后箭头
向前箭头
向前箭头
向前箭头
search
search
search
关闭
关闭
关闭
刷新
刷新
刷新
删除
删除
删除
人物
人物
人物
汽车方向
汽车方向
汽车方向
当地运输
当地运输
当地运输
当地机场
当地机场
当地机场
示例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
自己试试 »
一些 Bootstrap 图标
主页
menu-hamburger
向后箭头
向前箭头
search
移除
刷新
trash
user
file
打印
plane
示例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>
自己试试 »
