Блог

Главная - Вопросы по программированию - Как добавить значок в тег кнопки?

Как добавить значок в тег кнопки?

#javascript #html #jquery #css

Вопрос:

У меня есть кнопка включения, которая используется для воспроизведения песни. В этой кнопке я использую значок Unicode для управления воспроизведением звуковой дорожки, и он работает нормально, но основная проблема заключается в том, что он не отображается в соответствии с моим требуемым ЗНАЧКОМ (https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitaramp;unicon=f7a6 )

Я хочу показать этот значок в правом верхнем углу страницы, не затрагивая мою оставшуюся страницу, в основном карточки, это мой вывод

ВЫВОД.

пожалуйста, помогите мне достичь этого

 <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/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=downloadamp;id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
  <div>
    <button id="music" onclick="document.getElementById('player').play()">amp;#xf7a6;</button>
  </div>
  <!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="alternatetext"> -->
  <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;'>amp;#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,900amp;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>

Комментарии:

1. Ваш вопрос был отредактирован и теперь включает в себя пару строк, которые загружают значок OK, поэтому я немного не понимаю, в чем ваша проблема. Кстати, значок из набора Fontawesome.

2. @AHaworth Я отменил редактирование. Код во фрагменте не показывает значок, потому что его нет в элементе с классом FAS

Ответ №1:

Просто делайте то, что они делают на странице, на которую вы ссылаетесь

Вам нужен элемент с классами 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'>amp;#xf7a6;</button>

Комментарии:

1. Спасибо, это работает, но значок должен быть в верхней части страницы

Ответ №2:

Вы упомянули w3example, используя шрифтовые значки для отображения значков

Вы привели пример: https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitaramp;unicon=f7a6

Связанный шрифт, ужасный значок: https://fontawesome.com/v5.15/icons/guitar

Таким образом, значок не отображается во внешнем интерфейсе без вызова библиотеки fontawsome

Я внес изменения

1-й Добавить библиотеку шрифтов awsome в заголовок

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

2-й Добавить класс fas к кнопке

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

Изменено на

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

Пожалуйста, проверьте следующий рабочий код sinppet

 <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/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=downloadamp;id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
  <div>
<button id="music" onclick="document.getElementById('player').play()" class='fas'>
  amp;#xf7a6;
</button>
  </div>
  <!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="alternatetext"> -->
  <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;'>amp;#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,900amp;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>
Метки: