Блог

Главная - Вопросы по программированию - Почему я не могу изменить семейство шрифтов на моей навигационной панели?

Почему я не могу изменить семейство шрифтов на моей навигационной панели?

#html #css

#HTML #css

Вопрос:

Я не могу найти подходящий селектор для изменения типа шрифта для пунктов моего главного меню; не в выпадающем списке.

Я удалил все типы шрифтов css на случай, если что-то переопределяло что-то, и это ни к чему не привело. Затем я вставил в каждую строку моего css-файла ‘font-family: cursive’ для каждого селектора, и ни один из них не помог изменить шрифт. Я также заметил, что мои текстовые оформления не будут работать для пунктов меню, но на данном этапе я собираюсь назвать это потерянным. Вот мои рабочие файлы: 

 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

.Logo {
  padding: 0px;
}

.wrapper {
  min-height: 100%;
  width: 100%;
  position: relative;
}

body {
  height: 100%;
  background-size: cover;
  background: url("http://photokaz.com/wp-content/uploads/2013/01/New-Web-Belize-Dock-Final-2048.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

a {
  font-family: cursive;
}

h2 {
  padding: 5px;
  background: #646ecb;
  color: #f0f1f5;
  text-align: center;
  font-size: 30pt;
  letter-spacing: 15px;
}


/*background navbar color*/

.navbar {
  background: teal;
  height: 40px;
  width: 700px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

nav a {
  display: inline-block;
  text-decoration: line-through;
  font-weight: bold;
  font-size: 14px;
  color: aliceblue;
  font-family: cursive;
}

nav a:hover {
  color: #ffdc3d;
  text-decoration: underline !important;
}

nav ul {
  list-style: none;
  display: inline-block;
}

nav ul li:hover ul li {
  display: inline-block;
  background: teal;
}

nav ul li {
  float: left;
  width: 140px;
  height: 40px;
  line-height: 40px;
}

nav ul ul li {
  position: relative;
  display: none;
}  
 <html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S oqd12jhcu A56Ebc1zFSJ" crossorigin="anonymous">



  <title>Round-a-Whirl</title>
</head>

<body>
  <div class="wrapper">
    <header>
      <div></div>
      <h2><img src="HatchfulExport-All/linkedin_banner_image_1.png" height=75 width="auto" class="Logo"></h2>
    </header>
    <div class="navbar">
      <nav>
        <ul>
          <li><a href="#"><i class="fa fa-plane"> Flights</i></a></li>
          <li><a href="#"><i class="fa fa-hotel"> Hotel</i></a></li>
          <li><a href="#"><i class="fa fa-car"> Car Rental</i></a></li>
          <li><a href="#"><i class="fa fa-globe"> Discover</i></a>
            <ul>
              <li>Vacation</li>
              <li>Cruise</li>
              <li>City</li>
              <li>Nature</li>
              <li>Getaways</li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-tag"> Deals</i></a></li>

        </ul>

      </nav>
    </div>
  </div>
  <article>
    This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
  </article>


  <footer>
    Round-a-Whirl amp;copy; 2019
  </footer>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Ответ №1:

Ваш текст находится внутри <i> тега, и семейство шрифтов переопределяется шрифтом Awesome. Попробуйте это вместо:

<li><a href="#"><i class="fa fa-plane"></i> Flights</a></li>

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

1. Спасибо, это был идеальный ответ. Это также устранило проблему с оформлением текста!

Ответ №2:

Вероятно, вам нужно повысить конкретность. Попробуйте:

 .navbar nav ul {

Ответ №3:

Вы помещаете свой текст внутри <i> тега, к которому применяется стиль font-awesome. Вместо этого сделайте это.

 <li><a href="#"><i class="fa fa-plane"></i>Flights</a></li>

Ответ №4:

введите описание изображения здесь

Вы используете .если неправильно, семейство шрифтов переписывается для icon :

 .fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}

У вас должен быть текст после : <i class="fa fa-plane"></i> не в.

 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

.Logo {
  padding: 0px;
}

.wrapper {
  min-height: 100%;
  width: 100%;
  position: relative;
}

body {
  height: 100%;
  background-size: cover;
  background: url("http://photokaz.com/wp-content/uploads/2013/01/New-Web-Belize-Dock-Final-2048.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

a {
  font-family: cursive;
}

h2 {
  padding: 5px;
  background: #646ecb;
  color: #f0f1f5;
  text-align: center;
  font-size: 30pt;
  letter-spacing: 15px;
}


/*background navbar color*/

.navbar {
  background: teal;
  height: 40px;
  width: 700px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

nav a {
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  color: aliceblue;
  font-family: cursive;
}

nav a:hover {
  color: #ffdc3d;
  text-decoration: underline !important;
}

nav ul {
  list-style: none;
  display: inline-block;
}

nav ul li:hover ul li {
  display: inline-block;
  background: teal;
}

nav ul li {
  float: left;
  width: 140px;
  height: 40px;
  line-height: 40px;
}

nav ul ul li {
  position: relative;
  display: none;
}  
 <html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S oqd12jhcu A56Ebc1zFSJ" crossorigin="anonymous">



  <title>Round-a-Whirl</title>
</head>

<body>
  <div class="wrapper">
    <header>
      <div></div>
      <h2><img src="HatchfulExport-All/linkedin_banner_image_1.png" height=75 width="auto" class="Logo"></h2>
    </header>
    <div class="navbar">
      <nav>
        <ul>
          <li><a href="#"><i class="fa fa-plane"> </i>  Flights</a></li>
          <li><a href="#"><i class="fa fa-hotel"> </i> Hotel</a></li>
          <li><a href="#"><i class="fa fa-car"> </i> Car Rental</a></li>
          <li><a href="#"><i class="fa fa-globe"> </i> Discover</a>
            <ul>
              <li>Vacation</li>
              <li>Cruise</li>
              <li>City</li>
              <li>Nature</li>
              <li>Getaways</li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-tag"></i> Deals</a></li>

        </ul>

      </nav>
    </div>
  </div>
  <article>
    This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
  </article>


  <footer>
    Round-a-Whirl amp;copy; 2019
  </footer>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>

</html>