CSS 基础学习-100 css 使用外部图标库

由 hrs, 13 十月, 2021

外部图标库引用地址：

font awesome  图标库：<script src="https://kit.fontawesome.com/5c8afc9e87.js" crossorigin="ano    nymous"></script>
 bootstrap  图标库：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.    5.0/font/bootstrap-icons.css">
谷歌图标库： <link href="https://fonts.googleapis.com/icon?family=Material+Icons"   rel="stylesheet">

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://kit.fontawesome.com/5c8afc9e87.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <style>
      i{  
      color:red;
      font-size:30px;
      }   
      span{
        color:red;
        font:30px;
      }   

    </style>
  </head>
  <body>
    <h1>使用外部图标库</h1>
    <h2>Font Awesome 图标</h2>
    <i class="fas fa-angle-double-down"></i>
    <i class="fas fa-angle-double-left"></i>
    <i class="fas fa-angle-double-right"></i>
    <i class="fas fa-angle-double-up"></i>
    <h2>Bootstrap 图标</h2>
      <i class="bi bi-alarm"></i>
      <i class="bi bi-alarm-fill"></i>
      <i class="bi bi-bank"></i>
      <i class="bi bi-bank2"></i>

    <h2>Google 图标</h2>
    <span class="material-icons">build</span>
    <span class="material-icons">search</span>
    <span class="material-icons">favorite</span>
    <span class="material-icons">shopping_cart</span>
  </body>
</html>

运行效果：

css-100.png

标签

评论