W3.CSS 图标

图标库

通过W3.CSS你可以使用你喜欢的图标库，例如：

字体真棒图标
谷歌材料设计图标
Bootstrap图标

使用图标库

要插入图标：

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

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

要控制图标的大小，请更改图标的 font-size 属性，或使用其中之一w3-尺寸课程：

w3-小
w3-小号
w3-大号
w3-xxlarge
w3-xxxlarge
w3-巨型

一些很棒的字体图标

发发之家

发发酒吧

fa fa-箭头-左

fa fa-箭头-右

发发搜索

发发关闭

发发刷新

发发垃圾

发发男

发发车

发发卡车

发发飞机

示例

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.91xjr.com/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>






</body>
</html>

亲自试一试»

有关图标的完整列表：访问我们的图标参考

一些 Google Material Design 图标

家

菜单

返回箭头

向前箭头

搜索

关闭

刷新

删除

人

路线_汽车

本地运输

本地机场

示例

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.91xjr.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 图标

家

菜单-汉堡包

返回箭头

向前箭头

搜索

消除

刷新

垃圾

用户

文件

打印

飞机

示例

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






</body>
</html>

亲自试一试»