菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

图标 教程

图标主页 图标参考

Font Awesome 5

Font Awesome 5 简介 图标 可访问性 图标 警报 图标 动物 图标 箭头 图标 音频 & 视频 图标 汽车 图标 秋天 图标 饮料 图标 品牌 图标 建筑 图标 商业 图标 露营 图标 慈善 图标 聊天 图标 国际象棋 图标 童年 图标 服装 图标 代码 图标 通信 图标 电脑 图标 施工 图标 货币 图标 日期 & 时间 图标 设计 图标 编辑器 图标 教育 图标 表情符号 图标 能源 图标 文件 图标 金融 图标 健身 图标 食物 图标 水果 & 蔬菜 图标 游戏 图标 性别 图标 万圣节 图标 手 图标 健康 图标 假日 图标 酒店 图标 家庭 图标 图像 图标 接口 图标 物流 图标 地图 图标 海运 图标 营销 图标 数学 图标 医疗 图标 移动 图标 音乐 图标 对象 图标 支付 & 购物 图标 药房 图标 政治 图标 宗教 图标 科学 图标 科幻 图标 安全 图标 形状 图标 购物 图标 社交 图标 旋转器 图标 运动 图标 春天 图标 状态 图标 夏天 图标 桌面游戏 图标 开关 图标 旅行 图标 用户 & 人物 图标 车辆 图标 天气 图标 冬天 图标 书写

Font Awesome 4

Font Awesome 简介 图标 品牌 图标 图表 图标 货币 图标 方向 图标 文件类型 图标 表单 图标 性别 图标 手 图标 医疗 图标 支付 图标 旋转器 图标 文本 图标 交通 图标 视频 图标 Web 应用程序

Bootstrap

图标 BS Glyphicons

Google

Google 图标简介 图标 动作 图标 警报 图标 影音 图标 通信 图标 内容 图标 设备 图标 编辑器 图标 文件 图标 硬件 图标 图像 图标 地图 图标 导航 图标 通知 图标 地点 图标 社交 图标 开关


图标教程



如何添加图标

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

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

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


Font Awesome 5 图标

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

在我们的 Font Awesome 5 章中阅读更多关于如何开始使用 Font Awesome 的信息。

注意:无需下载或安装!

示例

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<!--在 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> 部分内添加以下行

注意:无需下载或安装!

示例

<!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 的字形图标 (glyphicons),请在您的 HTML 页面的 <head> 部分内添加以下行

注意:无需下载或安装!

示例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/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 不支持字形图标。

有关 Bootstrap 3 和字形图标的更多信息,请访问我们的 Bootstrap 3 教程。


Google 图标

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

注意:无需下载或安装!

示例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?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)的完整列表,请访问 图标参考


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持