W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 图标



图标库

使用W3.CSS,您可以使用任何图标库,如:

  • Font Awesome 图标
  • Google Material 图标
  • Bootstrap 图标

使用图标

要使用图标,只需将图标的名称添加到HTML 的 <i> 元素的类中即可。

要控制图标的大小,请更改图标的 font-size 属性,或使用类:

  • w3-tiny
  • w3-small
  • w3-large
  • w3-xxlarge
  • w3-xxxlarge

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

Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-cloud w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud w3-text-teal" style="font-size:64px"></i>

</body>
</html>
尝试一下 »

Note 查看完整的图标列表: 图标参考手册


Google Material Design 图标

home
home
menu
menu
arrow_back
arrow_back
arrow_forward
arrow_forward
search
search
close
close
refresh
refresh
delete
delete
person
person
directions_car
directions_car
local_shipping
local_shipping
local_airport
local_airport

Example

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

<i class="material-icons">cloud</i>
<i class="material-icons w3-large">cloud</i>
<i class="material-icons w3-xlarge">cloud</i>
<i class="material-icons w3-xxlarge">cloud</i>
<i class="material-icons w3-xxxlarge">cloud</i>
<i class="material-icons w3-text-teal" style="font-size:64px">cloud</i>

</body>
</html>
尝试一下 »

Bootstrap 图标


home

menu-hamburger

arrow_back

arrow_forward


search

remove

refresh

trash


user

file

print

plane

Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud w3-large"></i>
<i class="glyphicon glyphicon-cloud w3-xlarge"></i>
<i class="glyphicon glyphicon-cloud w3-xxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-text-teal" style="font-size:64px"></i>

</body>
</html>
尝试一下 »