CSS 基础（006_图标）

最新推荐文章于 2022-06-01 11:49:22 发布

柯南道尔2606

最新推荐文章于 2022-06-01 11:49:22 发布

阅读量485

点赞数

分类专栏： CSS

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

CSS Icons

示例：
CSS Icons

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>CSS Icons</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    </head>
    <body>
        <i class="fa fa-cloud" style="font-size: 36px;"></i>
        <i class="fa fa-cloud" style="font-size: 60px;"></i>
        <i class="fa fa-cloud" style="font-size: 72px; color: red;"></i>
        <i class="fa fa-car" style="font-size: 36px;"></i>
        <i class="fa fa-car" style="font-size: 60px;"></i>
        <i class="fa fa-car" style="font-size: 72px; color: red;"></i>
        <i class="fa fa-thumbs-o-up" style="font-size: 36px;"></i>
        <i class="fa fa-thumbs-o-up" style="font-size: 60px;"></i>
        <i class="fa fa-thumbs-o-up" style="font-size: 72px; color: red;"></i>
    </body>
</html>

How To Add Icons

向 HTML 页面添加图标（icon）最简单的方式是使用图标库（icon library），例如 Font Awesome 库。
将图标的 class 名称添加到任何行内元素（例如 <i> 或 <span>）上。
以上示例中的所有图标全部来自图标库，它们是可伸缩矢量图，因此可以使用 CSS 进行自定义（大小、颜色、阴影等）。

Font Awesome Icons

要使用 Font Awesome 图标，我们需要将以下代码行添加到 HTML 页面的 <head> 区域中：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

提示：无需下载或安装！

示例：
CSS Icons

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/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 Icons

要使用 Bootstrap glyphicons，我们需要将以下代码行添加到 HTML 页面的 <head> 区域中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

提示：无需下载或安装！

示例：
CSS Icons

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div style='margin: 20px;'>
            <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>
        </div>
    </body>
</html>

要想获得所有图标的列表，请访问 Icon Tutorial 。

柯南道尔2606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础（006_图标）

CSS Icons示例： html lang="en-US"> head> title>CSS Iconstitle> meta charset="utf-8"> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.
复制链接

扫一扫