Tworzymy pasek ikon za pomocą HTML i CSS

Czas czytania: 2 minut

Dziś pokażę wam jak zrobić bardzo prosty pasek ikon (Icon Bar) na stronę internetową używając do tego HTML i CSS. Pasek taki czasami wykorzystywany jest jako dodatkowe menu nawigacyjne. Jak w większości przypadków pracy z HTML i CSS, w HTML stworzona jest cała struktura paska a CSS decyduje o ich wyglądzie i położeniu.

Zanim przystąpimy do pracy

Na początek warto jest sobie przygotować ikonki, które będzie się używać w pasku. W tym przykładzie będzie to:

• domek – symbol strony głównej,
• lupa – szukaj,
• koperta – kontakt, e-mail.
• globus – internet, więcej zasobów,
• kosz – usuń.

By móc z nich skorzystać użyłam biblioteki Font Awesome. Możecie jednak użyć innej.

Bibliotekę możecie pobrać tutaj -> https://fontawesome.com/download – Interesuje nas głównie plik all.min.css

Po instalacji biblioteki można korzystać z ikon pełną ich listę znaleźć można na stronie projektu. Implementacja (użycie) ikonki zaś wygląda np. „<i class="fa fa-search"></i>„. Gdzie klasa fa fa-search to odwołane do ikony (jak nazwa wskazuje search czyli szukaj, lupki).

Jak stworzyć prosty pionowy pasek ikon?

Praktycznie w każdym przykładzie jaki pokaże tutaj struktura HTML będzie analogiczna. Różnicą będzie jedynie klasa CSS, która będzie formatowała kod. Tak więc nasz kod wygląda następująco:

<div class="icon-bar">
    <a class="active" href="#"><i class="fa fa-home"></i></a> 
    <a href="#"><i class="fa fa-search"></i></a> 
    <a href="#"><i class="fa fa-envelope"></i></a> 
    <a href="#"><i class="fa fa-globe"></i></a>
    <a href="#"><i class="fa fa-trash"></i></a> 
 </div>

Kolejnym krokiem po zbudowaniu struktury jest nadanie jej określonych cech. W tym przypadku będzie to wyglądało następująco:

.icon-bar {
  width: 100%;
  background-color: #554;
  overflow: auto;
}

.icon-bar a {
  float: left;
  width: 20%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.icon-bar a:hover {
  background-color: #333;
}
/* aktywny element */
.active {
  background-color: #e81b18;
}

Jak z pewnością już wiecie w miejscu symbolu „#” umieszcza się pożądany adres URL. Czyli taki prowadzący do odpowiedniego zasobu lub strony.

Pasek ikon w Flexbox (flex)

We Flexbox czyli z zastosowaniem Flexa tworzyłam 2 przykłady. Pierwszy z paskiem poziomym i drugi z paskiem pionowym. Pierwszy z dwóch, poziomy jest responsywny. Jeżeli ekran jest za mały by poprawnie się wyświetlił staje się pionowy.

Kod pierwszego paska Flexbox

.icon-bar-2{
display: flex;
background-color: #554;
margin: 15px 0;
}
.icon-bar-2 a{
padding: 15px;
flex: 1;
align-self: center;
font-size: 30px;
text-align: center;
  color: white;
}
.icon-bar-2 a:hover{
  background-color: #333;
}
/* aktywny element */
.active {
  background-color: #e81b18;
}

Kod RWD

@media screen and (max-width: 750px){
  .icon-bar-2{
 flex-direction:column;
 width: 10%;
 min-width: 60px;
 max-width: 70px;
 overflow: hidden;
}
.icon-bar-2 a{
  width:100%;
}
}

Kod pionowego paska będzie wyglądał następująco:

.icon-bar-3{
display: flex;
background-color: #554;
margin: 15px 0;
flex-direction:column;
 width: 10%;
 min-width: 60px;
 max-width: 70px;
 overflow: hidden;
}
.icon-bar-3 a{
padding: 15px;
flex: 1;
align-self: center;
font-size: 30px;
text-align: center;
  color: white;
}
.icon-bar-3 a:hover{
  background-color: #333;
}
.icon-bar-3 a{
  width:100%;
}

Jak widać moje ostatnie dwa przykłady są do siebie dość podobne. By lepiej zrozumieć Flexbox zapraszam was na stronę – flexbox.aurainweb.pl

Źródła:

• https://www.geeksforgeeks.org/web-templates/create-an-icon-bar-using-html-and-css
• https://www.w3schools.com/howto/howto_css_icon_bar.asp