如何在按鈕標簽中添加圖示？-有解無憂

我有用于播放歌曲的按鈕。在那個按鈕中，我使用 unicode 圖示來控制播放音軌，它作業正常，但主要問題是它沒有按照我要求的圖示顯示（https://www.w3schools.com/icons/tryit.asp?icon =fas_fa-吉他&unicon=f7a6 )

我想在頁面的右上角顯示該圖示而不影響我剩余的頁面主要是卡片，這是我的輸出

如何在按鈕標簽中添加圖示？ .

請幫我實作這件事

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <title>Special-Wishes </title>
  <script>
  </script>
</head>

<body>

  // thi is the audio code
  <audio autoplay id="player">
  <source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
  <div>
    <button id="music" onclick="document.getElementById('player').play()">&#xf7a6;</button>
  </div>
  <!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="如何在按鈕標簽中添加圖示？"> -->
  <div class="container">
    <div class="card">
      <div class="box">
        <div class="content">
          <h2 id="initial">Me</h2>
          <h3>Card One</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="box">
        <div class="content">
          <h2><span class="heart-icon" style='font-size:180px;'>&#9829;</span></h2>
          <h3>Card Two</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="box">
        <div class="content">
          <h2>AK</h2>
          <h3>Card Three</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
  </div>




</body>
<style>
  @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
  .heart-icons {
    margin-left: -40%;
  }
  
  #music {
    font-size: 50px;
  }
  
  * {
    margin: o;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
    /* background:#c7c744; */
  }
  
  #my_audio {
    margin-top: -40%;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #ebf5fc;
  }
  
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    flex-wrap: wrap;
    padding: 40px 0;
  }
  
  .container .card {
    position: relative;
    width: 320px;
    height: 440px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    margin: 30px;
  }
  
  .container .card .box {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: #ebf5fc;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
  }
  
  .container .card:hover .box {
    transform: translateY(-50px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    background: linear-gradient(45deg, #b95ce4, #4f29cd);
  }
  
  .container .card .box .content {
    padding: 20px;
    text-align: center;
  }
  
  .container .card .box .content h2 {
    position: absolute;
    top: -10px;
    right: 30px;
    font-size: 8em;
    color: rgba(0, 0, 0, 0.02);
    transition: 0.5s;
    pointer-events: none;
  }
  
  .container .card:hover .box .content h2 {
    color: rgba(0, 0, 0, 0.05);
  }
  
  .container .card .box .content h3 {
    font-size: 1.8em;
    color: #777;
    z-index: 1;
    transition: 0.5s;
  }
  
  .container .card .box .content p {
    font-size: 1em;
    font-weight: 300;
    color: #777;
    z-index: 1;
    transition: 0.5s;
  }
  
  .container .card:hover .box .content h3,
  .container .card:hover .box.content p {
    color: #fff;
  }
  
  .container .card .box .content a {
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    background: #03a9f4;
    margin-top: 15px;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  
  .container .card:hover .box .content a {
    background: #ff568f;
  }
  
  #i1 {
    width: 100%;
    height: 50px;
  }
  
  h1 {
    text-align: center;
    font-size: 65px;
    font-style: italic;
  }
</style>

</html>

uj5u.com熱心網友回復：

只需在您鏈接到的頁面上執行他們所做的操作

您確實需要一個具有 FAS 類的元素 - 您可以為按鈕提供該類

注意放置按鈕的 CSS

您的 HTML 也無效。你的身體標簽太多了

#music  { position: absolute; top: 10px; right:50px}

<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
<button id="music" onclick="document.getElementById('player').play()" class='fas'>&#xf7a6;</button>

uj5u.com熱心網友回復：

您提到 w3example 使用 font-awsome 圖示來顯示圖示

你給出的例子：https : //www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitar&unicon=f7a6

相關字體 Awsome 圖示：https : //fontawesome.com/v5.15/icons/guitar

所以圖示不會顯示到前端而不呼叫 fontawsome 庫

我做了改變

1st將字體 awsome 庫添加到頭部

<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />

第二個將 fas 類添加到按鈕

<button id="music" onclick="document.getElementById('player').play()">&#xf7a6;</button>

變成

<button id="music" onclick="document.getElementById('player').play()" class='fas'>&#xf7a6;</button>

請檢查以下作業代碼 sinppet

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <title>Special-Wishes </title>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
</head>

<body>

  // thi is the audio code
  <audio autoplay id="player">
  <source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
  <div>
<button id="music" onclick="document.getElementById('player').play()" class='fas'>
  &#xf7a6;
</button>
  </div>
  <!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="如何在按鈕標簽中添加圖示？"> -->
  <div class="container">
    <div class="card">
      <div class="box">
        <div class="content">
          <h2 id="initial">Me</h2>
          <h3>Card One</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="box">
        <div class="content">
          <h2><span class="heart-icon" style='font-size:180px;'>&#9829;</span></h2>
          <h3>Card Two</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="box">
        <div class="content">
          <h2>AK</h2>
          <h3>Card Three</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
  </div>




</body>
<style>
  @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
  .heart-icons {
    margin-left: -40%;
  }
  
  #music {
    font-size: 50px;
  }
  
  * {
    margin: o;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
    /* background:#c7c744; */
  }
  
  #my_audio {
    margin-top: -40%;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #ebf5fc;
  }
  
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    flex-wrap: wrap;
    padding: 40px 0;
  }
  
  .container .card {
    position: relative;
    width: 320px;
    height: 440px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    margin: 30px;
  }
  
  .container .card .box {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: #ebf5fc;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
  }
  
  .container .card:hover .box {
    transform: translateY(-50px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    background: linear-gradient(45deg, #b95ce4, #4f29cd);
  }
  
  .container .card .box .content {
    padding: 20px;
    text-align: center;
  }
  
  .container .card .box .content h2 {
    position: absolute;
    top: -10px;
    right: 30px;
    font-size: 8em;
    color: rgba(0, 0, 0, 0.02);
    transition: 0.5s;
    pointer-events: none;
  }
  
  .container .card:hover .box .content h2 {
    color: rgba(0, 0, 0, 0.05);
  }
  
  .container .card .box .content h3 {
    font-size: 1.8em;
    color: #777;
    z-index: 1;
    transition: 0.5s;
  }
  
  .container .card .box .content p {
    font-size: 1em;
    font-weight: 300;
    color: #777;
    z-index: 1;
    transition: 0.5s;
  }
  
  .container .card:hover .box .content h3,
  .container .card:hover .box.content p {
    color: #fff;
  }
  
  .container .card .box .content a {
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    background: #03a9f4;
    margin-top: 15px;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  
  .container .card:hover .box .content a {
    background: #ff568f;
  }
  
  #i1 {
    width: 100%;
    height: 50px;
  }
  
  h1 {
    text-align: center;
    font-size: 65px;
    font-style: italic;
  }
</style>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/341044.html

標籤：javascript html 查询 css

上一篇：將回圈內的物件陣列合并到新物件中

下一篇：DOMContentLoaded將在我的頁面上觸發兩次