THE WORLD'S LARGEST WEB DEVELOPER SITE

图标教程

图标首页 图标参考

字体图标

字体图标简介 图标可访问性 图标警报 图标动物 图标箭头 图标音频和视频 汽车图标 图标秋天 图标饮料 图标品牌 图标建筑物 图标业务 图标露营 图标慈善 图标聊天 象棋 图标童年 图标服装 图标代码 图标通讯 图标计算机 图标建设 图标货币 图标日期和时间 图标设计 图标编辑器 图标教育 表情符号 图标能源 图标文件 图标财务 图标健身 图标食品 水果和蔬菜 图标游戏 图标性别 图标万圣节 图标的手 图标健康 图标假期 图标酒店 图标家用 图标图像 图标界面 图标物流 图标图 海事图标 图标营销 图标数学 图标医疗 图标移动 图标音乐 图标对象 图标付款和购物 图标药房 政治图标 图标宗教 图标科学 图标科学 Fiction 图标安全 图标形状 图标购物 图标社交 图标微调 图标运动 图标春天 图标状态 图标夏天 图标桌面游戏 图标切换 图标旅行 图标用户和人 图标车辆 图标天气 图标冬天 图标写作

字体图标4

字体图标简介 图标品牌 图标图 图标货币 定向图标 图标文件类型 图标形式 图标性别 图标的手 图标医疗 图标付款 图标微调 图标文字 图标运输 图标视频 图标Web应用程序

引导程序

图标BS 雕ly

谷歌

Google图标介绍 图标动作 图标警报 图标AV 图标通讯 图标内容 图标设备 图标编辑器 图标文件 图标硬件 图标图像 图标图 图标导航 图标通知 图标的地方 图标社交 图标切换


Icons Tutorial



How To Add Icons

To insert an icon, add the name of the icon class to any inline HTML element.

The <i> and <span> elements are widely used to add icons.

All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)


Font Awesome 5 Icons

To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.

Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.

Note: No downloading or installation is required!

Example

<!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>
Try It Yourself »

Font Awesome 4 Icons

To use the Font Awesome 4 icons, add the following line inside the <head> section of your HTML page:

Note: No downloading or installation is required!

Example

<!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>
Try It Yourself »


Bootstrap 3 Icons

To use the Bootstrap 3 glyphicons, add the following line inside the <head> section of your HTML page:

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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>
Try It Yourself »

Note: 雕ly are not supported in Bootstrap 4.

For more information about Bootstrap 3 and 雕ly, visit our Bootstrap 3教程.


Google Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

Note: No downloading or installation is required!

Example

<!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>
Try It Yourself »

For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon 参考.




W3Schools is optimized for learning, testing, and training. 示例 might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

W3Schools.com