CSS 基础（006_图标）

来源：互联网发布：淘宝网页设计怎么设计编辑：程序博客网时间：2024/06/03 08:17

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 。

0 0