HTML - fontawesome icon + dropdown

S

sharpshooter

Registered
Здравейте! Може ли някой да ми помогне със следното нещо:
HTML - fontawesome иконка, която да има dropdown. Ако е възможно, да има вариант да се нагласи и размерът.
 
Това дали ще свърши работа:

www.c-sharpcorner.com

How to add font awesome icon with the drop down menu.

How to add font awesome icon with the drop down menu.
www.c-sharpcorner.com www.c-sharpcorner.com

Малко не разбрах. Търси се дропдаун иконка, която да съдържа и функционалността да дропдаува? Или се търси само иконката. Размера винаги можеш да си пишат или инлайн или с CSS. Ако нещо не съм разбрал, моля за повече инфо.
 
Здравей! Иконката е ясна - някоя от библиотеката на fontawesome. Идеята е с HTML да се направи dropwdown като иконката да е все едно хамбургера и при клик/хавър да отвори менюто.
Колкото до размера, би било най-добре, ако се сложи директно в HTML-a, примерно така:
HTML: 
 <i class="fa fa-car" style="font-size:48px;"></i>
Благодаря за отговора!
 
Това Ок ли е?

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com
 
Да, ОК е, но това е ясно. Единствено искам вместо зеления бутон да е иконка от fontawesome библиотеката. Благодаря още веднъж за отделеното време!
 
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <title>Document</title>
    <style>
        .dropbtn {
          color: #000;
          padding: 16px;
          font-size: 16px;
          border: none;
        }
        
        .dropdown {
          position: relative;
          display: inline-block;
        }
        
        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f1f1f1;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
        }
        
        .dropdown-content a {
          color: #000;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
        }
        
        .dropdown-content a:hover {
            background-color: #ddd;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <div class="dropdown">
        <div class="dropbtn">
            <i class="fa fa-bars"></i>
        </div>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
    </div>
</body>
</html>

Така как е?
 
Последно редактирано:
sharpshooter каза:
Да, ОК е, но това е ясно. Единствено искам вместо зеления бутон да е иконка от fontawesome библиотеката. Благодаря още веднъж за отделеното време!
Увеличете...
Просто добави в решението на Blinky към класовете на бутона <button class="dropbtn">Dropdown</button> тези класове, които сам посочи в по-предния пост? (fa и fa-car)
 
Хаха :)
 
В случая няма как да стане. Не ми беше ясно само как да добавя в dropdown класа иконка от fontawesome библиотеката. Още веднъж благодаря на колегата.
 
Извинявам се много, но може ли да променим иконката? Вместо fontawesome да е някаква custom, заредена от URL? Благодаря предварително!
 
sharpshooter каза:
Извинявам се много, но може ли да променим иконката? Вместо fontawesome да е някаква custom, заредена от URL? Благодаря предварително!
Увеличете...
Можеш или като вложена, което не е много яко или като бекраунд към елемент.

HTML: 
<a href="#" class="ico">Email Link</a>

CSS: 
.ico:after{
    content: '';
    display: block;
    height: 40px;  /*height of icon */
    width: 40px;  /*width of icon */
    position: absolute;
      /*where to replace the icon */
    top: 0px;
    left: -40px;
      /*background */
    background: #F8E6AE url(ico.gif) no-repeat 0px 0px;
}

Примерно де, взех до от нета, но има по-добри изпълнения. После може да си играеш с ховъра.
 
От тук може да си правиш custom font, може да използваш готови икони или да си import-ваш свои.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе