W3.CSS 图标

图标库

有了W3.CSS你可以使用你喜欢的图标库，比如:

Font Awesome 字体图标
Google Material Design 图标
Bootstrap 图标

使用图标库

插入图标:

在 <head> 部分中包含来自 CDN（内容分发网络）的图标库。
将图标类的名称添加到任何内联 HTML 元素。

提示: 和 元素广泛用于添加图标。

要控制图标的大小，更改图标的 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://www.w3ccoo.com/w3css/4/w3.css">
<link rel="stylesheet" href="/cdnjs/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>






</body>
</html>

亲自试一试 »

如需完整的图标列表:访问我们的图标参考

一些 Google Material Design 图标

home

arrow_back

arrow_forward

refresh

delete

person

directions_car

local_shipping

local_airport

实例

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3ccoo.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>

home
search
cloud
delete

</body>
</html>

亲自试一试 »

一些 Bootstrap 图标

home

menu-hamburger

arrow_back

arrow_forward

remove

refresh

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://www.w3ccoo.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3ccoo.com/lib/bootstrap/3.3.6/css/bootstrap.min.css">
<body>






</body>
</html>

亲自试一试 »