Блог

Главная - Вопросы по программированию - Почему на моей кнопке scearch ber нет увеличительного стекла?

Почему на моей кнопке scearch ber нет увеличительного стекла?

#html #css #font-awesome

#HTML #css #шрифт -потрясающий

Вопрос:

Привет, я добавляю панель поиска на свой сайт, но когда она добавляет
увеличительное стекло из font awesome, оно не отображается.
Я включил css только для строки поиска, так как у меня
все остальное настроено хорошо
, в чем проблема?

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>OnTop Servers</title>
</head>
<body>
    <nav class="topnav">
        <div class="topnav-right">
        <a class="active" href="index.html">Home</a>
        <a href="search.html">Search</a>
        <a href="servers.html">Servers</a>
        </div>
         <h2 class="title">
            OnTop Servers
        </h2>
    </nav>
    <center>
        <div class="welcome">
            <div class="centered-text">
                <div class="welcome-body-inner">
                <h2 class="head">
                    DISCOVER
                    <span class="discord-logo">discord1</span>
                    SERVERS
                </h2>
                <h3 class="body">
                    Find amazing servers to interact with and make friends
                </h3>
                  <div class="search-box">
                      <input class="search-txt" type="text" name="" placeholder="Search..">
                      <a class="search-btn" href="">
                        <i class="fas fa-search"></i>
                      </a>
                  </div>
                </div>
            </div>
        </div>
    </center>

Вот css для строки поиска:

 .search-box {
  position: absolute;
  top: 100%;
  left: 35%;
  transform: translate(-50%, -50%);
  background: #2c2c2c;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-btn {
  color: #fff;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2c2c2c;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

1. Вы не показали нам, как вы загружаете FontAwesome.

2. Я подозреваю, что на самом деле вы не загружаете FontAwesome. Этого нет в вашем HTML-коде. Почему бы вам не создать минимально воспроизводимый пример либо в фрагменте кода, либо в аналогичном инструменте, таком как JSFiddle?

Ответ №1:

Ваша проблема с кодом заключается в том, что вы не включили файлы Font Awesome или CDN или значки, если быть точным. Вы должны извлечь его откуда-нибудь, например, загрузить значок Font Awesome или просто использовать CDN (рекомендуется)

Я даю вам CDN шрифта awesome и помещаю эту строку кода в <head> часть кода

CDN: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> или вы можете следовать руководству на YouTube и загружать эти значки

Например:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <title>OnTop Servers</title>
</head>
<body>
    <nav class="topnav">
        <div class="topnav-right">
        <a class="active" href="index.html">Home</a>
        <a href="search.html">Search</a>
        <a href="servers.html">Servers</a>
        </div>
         <h2 class="title">
            OnTop Servers
        </h2>
    </nav>
    <center>
        <div class="welcome">
            <div class="centered-text">
                <div class="welcome-body-inner">
                <h2 class="head">
                    DISCOVER
                    <span class="discord-logo">discord1</span>
                    SERVERS
                </h2>
                <h3 class="body">
                    Find amazing servers to interact with and make friends
                </h3>
                  <div class="search-box">
                      <input class="search-txt" type="text" name="" placeholder="Search..">
                      <a class="search-btn" href="">
                        <i class="fas fa-search"></i>
                      </a>
                  </div>
                </div>
            </div>
        </div>
    </center>

Надеюсь, у вас отличный день!

Метки: