Icons 字体图标教程

Icons 字体图标简介 Icons 字体图标大全

Font Awesome 5

Font Awesome 5 图标简介 Icons 辅助 Icons 警报 Icons 动物 Icons 箭头 Icons 音频和视频 Icons 汽车 Icons 秋季 Icons 饮料 Icons 品牌 Icons 建筑 Icons 商业 Icons 野营 Icons 慈善 Icons 聊天 Icons 国际象棋 Icons 儿童 Icons 服装 Icons 代码 Icons 通讯 Icons 电脑 Icons 建造工具 Icons 货币 Icons 日期和时间 Icons 设计 Icons 编辑器 Icons 教育 Icons 表情 Icons 能源 Icons 文件 Icons 金融 Icons 健身 Icons 食物 Icons 水果和蔬菜 Icons 游戏 Icons 性别 Icons 万圣节 Icons 手势 Icons 健康 Icons 节日 Icons 酒店 Icons 家居 Icons 图像 Icons 界面 Icons 物流 Icons 地图 Icons 航海 Icons 营销 Icons 数学 Icons 医学 Icons 视频 Icons 音乐 Icons 对象 Icons 支付和购物 Icons 药房 Icons 政治 Icons 宗教 Icons 科学 Icons 科幻 Icons 安全 Icons 形状 Icons 购物 Icons 社交 Icons 旋转 Icons 体育 Icons 春季 Icons 状态 Icons 夏季 Icons 桌面游戏 Icons 切换 Icons 旅行 Icons 用户和人物 Icons 车辆 Icons 天气 Icons 冬季 Icons 书写

Font Awesome 4

Font Awesome 图标简介 Icons 品牌 Icons 图表 Icons 货币 Icons 方向 Icons 文件类型 Icons 表单 Icons 性别 Icons 手势 Icons 医疗 Icons 支付 Icons 加载中 Icons 文本 Icons 交通工具 Icons 视频播放 Icons Web 程序

Bootstrap 图标

Icons BS 字体图标

Google 图标

Google 字体图标简介 Icons 动作 Icons 警报 Icons AV Icons 通讯 Icons 内容 Icons 设备 Icons 编辑器 Icons 文件 Icons 硬件 Icons 图像 Icons 地图 Icons 导航 Icons 通知 Icons 放置 Icons 社交 Icons 切换


字体图标简介



如何添加字体图标

要插入图标,请将图标类的名称添加到任何内联 HTML 元素中。

使用 <i><span> 元素被广泛用于添加图标。

下面图标库中的所有图标都是可缩放的矢量图标,可以使用CSS(大小、颜色、阴影等)进行自定义。


Font Awesome 5 图标

要使用免费 Font Awesome 5 图标,请访问 fontawesome.com 并注册登录以获取在网页中使用的代码。

关于如何开始使用Font Awesome 5 图标,请访问 Font Awesome 5 一章。

注释: Font Awesome 5 图标无需下载或安装!

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/yourcode.js"></script>
<!--Get your code at fontawesome.com-->
</head>
<body>

<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>

</body>
</html>
亲自试一试 »

Font Awesome 4 图标

要使用 Font Awesome 4 图标,请在 HTML 页面的 <head> 部分添加以下行:

注释: Font Awesome 4 图标无需下载或安装!

实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>
亲自试一试 »


Bootstrap 3 图标

要使用 Bootstrap 3 图标,请在 HTML 页面的 <head> 部分添加以下行:

注释: Bootstrap 3 图标无需下载或安装!

实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.cn/lib/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>
亲自试一试 »

注释: Bootstrap 4 中不支持 Glyphicons。

有关 Bootstrap 3 和 Glyphicons 的更多信息,请访问我们的 Bootstrap 3 教程


Google 图标

要使用 Google 谷歌图标,请在 HTML 页面的 <head> 部分添加以下行:

注释: Google 谷歌图标无需下载或安装!

实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/fonts/icon.asp?family=Material+Icons">
</head>
<body>

<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>
亲自试一试 »

有关所有图标的完整列表 (font awesome, bootstrap 和 google),请访问 图标参考手册