Блог

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

Как мне использовать свой собственный значок здесь только HMTL CSS

#html #css

#HTML #css

Вопрос:

Я создал 2 png значка, которые я хотел бы использовать вместо тех, которые у меня есть здесь, из Font Awesome. Но как мне их вставить? Я не могу просматривать изображения при выборе class <label for="" class="cancel-btn"><i *class="fas fa-times"*></i></label , но, похоже, это вообще не работает.

 @charset "UTF-8";

/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'
}

nav {
  background: #036832;
  position: fixed;
  width: 100%;
  z-index: 999;
}

nav .wrapper {
  /* border */
  max-width: 1250px;
  padding: 0 5px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 65px;
}

.wrapper .nav-links {
  display: inline-flex;
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  /* menu bar */
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 4px;
  transition: all 0.4s ease;
}

.nav-links li a:hover {
  background: #213B35;
}

.nav-links .drop-menu {
  background: #046832;
  line-height: 45px;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.nav-links li:hover .drop-menu {
  opacity: 1;
  visibility: visible;
  transition: all 0.4s ease;
}

.drop-menu li a {
  /* drop menu teksten */
  display: block;
  font-weight: 400;
  border-radius: 10px;
}

div.picture1 {
  width: 153px;
  height: 60px;
  background-image: url('Carlsberglogof.png');
}

.nav-links .mobile-item {
  display: none;
}

@media screen and (max-width: 970px) {
  /* drop menu mobil */
  .wrapper .nav-links {
    position: fixed;
    display: block;
    height: 100vh;
    width: 100%;
    max-width: 350px;
    background: #046832;
    top: 0;
    left: 0;
    overflow-y: auto;
    line-height: 50px;
    padding: 50px 10px;
    box-shadow: 2px 15px 15px;
  }
  .nav-links li {
    margin: 10px 10px;
  }
  .nav-links li a {
    padding: 0 20px;
    display: block;
    font-size: 20px;
  }
  .nav-links .drop-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    padding-left: 10px;
    max-height: 0px;
    overflow: hidden;
  }
  #showdrop:checked~.drop-menu {
    max-height: 100%;
  }
  .nav-links .drop-menu li {
    margin: 0;
  }
  .nav-links .drop-menu li a {
    font-size: 18px;
  }
  .nav-links .desktop-item {
    display: none;
  }
  .nav-links .mobile-item {
    display: block;
    font-size: 20px;
    color: white;
    font-weight: 500;
    padding-left: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.4s ease;
  }
  .nav-links .mobile-item:hover {
    background: #213B35;
  }
}

.wrapper input {
  display: none;
} 
 <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Carlsberg</title>
  <link rel="stylesheet" href="Style.css">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <nav>
    <div class="wrapper">
      <div class="picture1">amp;nbsp;</div>
      <ul class="nav-links">
        <label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
        <li><a href="#">Forside</a></li>
        <li>
          <a href="#" class="desktop-item">Mød os</a>
          <input type="checkbox" id="showdrop">
          <label for="showdrop" class="mobile-item">Mød os</label>
          <ul class="drop-menu">
            <li><a href="#">Organisation</a></li>
            <li><a href="#">Historien bag</a></li>
          </ul>
        </li>
        <li><a href="#">Kontakt</a></li>
      </ul>
      <label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
    </div>
  </nav>
</body>

</html>

Надеюсь, кто-нибудь может помочь, хорошего дня! : D

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

1. какие значки? можете ли вы показать нам, какого результата вы ожидаете? Например, вы можете вставить значок в виде изображения с реальным тегом <img>

Ответ №1:

Просто сделайте это с помощью тега img:

 <img src="your_icon_src" alt="" width="20" height="20">

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

1. Я пытаюсь сделать png боттоном, как этот парень делает это в видео youtu.be/rB28hKxvN38?t=806 как я могу пометить его, чтобы я мог использовать его так же, как мой html теперь выглядит так'<img for=»cancel-btn» class=»btn отмена-btn» src =»kryds.png» alt =»» width=»20″ height =»20″>’

2. Вы не понимаете, что такое «for», for допустимо только в теге label, вы можете проверить это здесь: developer.mozilla.org/es/docs/Web/HTML/Element/label . Итак, вам нужно что-то вроде: <label for="cancel-btn"><img width="20" height="20" src="kryds.png"><input type="button" class="btn cancel-btn" id="cancel-btn" onclick="yourClickFunction()"></label>

Метки: