CSS图标用法详细指南(+代码示例)

2021年4月8日17:48:59 发表评论 290 次浏览

可以使用图标库将图标添加到我们的HTML页面。库中的所有图标都可以使用CSS设置格式。可以根据大小, 颜色, 阴影等进行自定义。

图标库的类型:

注意:上述所有库均无需下载或安装。

Font Awesome图标:要使用"Font Awesome图标", 请在<head>部分中添加以下链接。

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

示例1:

<!DOCTYPE>
<html>
    <head>
       <link rel = "stylesheet" 
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
       <h1>
          lsbin
       </h1>
       <i class = "fa fa-cloud" style = "font-size:32px;"></i>
       <i class = "fa fa-heart" style = "font-size:32px;"></i>
       <i class = "fa fa-file" style = "font-size:32px;"></i>
       <i class = "fa fa-car" style = "font-size:32px;"></i>
       <i class = "fa fa-bars" style = "font-size:32px;"></i>
    </body>
</html>

输出如下:

示例2:

<!DOCTYPE>
<html>
    <head>
       <link rel = "stylesheet" 
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
       <h1>
          lsbin
       </h1>
       <i class = "fa fa-heart" style = "font-size:28px;color:red;"></i>
       <i class = "fa fa-heart" style = "font-size:30px;color:blue;"></i>
       <i class = "fa fa-heart" style = "font-size:32px;color:red;"></i>
       <i class = "fa fa-heart" style = "font-size:34px;color:blue;"></i>
       <i class = "fa fa-heart" style = "font-size:36px;color:red;"></i>
    </body>
</html>

输出如下:

Google图标:要使用Google图标, 请在<head>部分中添加以下链接。

<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">

示例1:

<!DOCTYPE>
<html>
    <head>
       <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    <body>
       <h1>
          lsbin
       </h1>
       <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>

输出如下:

示例2:

<!DOCTYPE>
<html>
    <head>
       <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    <body>
       <h1>
          lsbin
       </h1>
       <i class = "material-icons" style = "font-size:30px;">cloud</i>
       <i class = "material-icons" style = "font-size:40px;">cloud</i>
       <i class = "material-icons" style = "font-size:50px;">cloud</i>
       <i class = "material-icons" style = "font-size:60px;">cloud</i>
       <i class = "material-icons" style = "font-size:70px;">cloud</i>
    </body>
</html>

输出如下:

Bootstrap程序图标:要使用Bootstrap图标, 请在<head>部分中添加以下链接。

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

示例1:

<!DOCTYPE>
<html>
    <link rel = "stylesheet" 
    href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
       <h1>
          lsbin
       </h1>
       <i class = "glyphicon glyphicon-cloud" style = "font-size:28px;"></i>
       <i class = "glyphicon glyphicon-user" style = "font-size:30px;"></i>
       <i class = "glyphicon glyphicon-thumbs-up" style = "font-size:32px;"></i>
       <i class = "glyphicon glyphicon-remove" style = "font-size:34px;"></i>
       <i class = "glyphicon glyphicon-envelope" style = "font-size:36px;"></i>
    </body>
</html>

输出如下:

示例2:

<!DOCTYPE>
<html>
    <link rel = "stylesheet" 
    href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
       <h1>
          lsbin
       </h1>
       <i class = "glyphicon glyphicon-thumbs-up" style = "font-size:20px;"></i>
       <i class = "glyphicon glyphicon-thumbs-up" style = "font-size:30px;"></i>
       <i class = "glyphicon glyphicon-thumbs-up" style = "font-size:40px;"></i>
       <i class = "glyphicon glyphicon-thumbs-up" style = "font-size:50px;"></i>
       <i class = "glyphicon glyphicon-thumbs-up" style = "font-size:60px;"></i>
    </body>
</html>

输出如下:


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: