Ikonka za pomocą CSS? – czemu nie

Tomek Kowalczyk Modyfikowany lut 13, 2017

Jeżeli chcesz użyć na stronie tylko kilku ikonek i nie chcesz koniecznie używać do tego ikon w formie graficznej lub dołączać plików np. Font Awesome możesz użyć CSS ICON Animate.

Aby powiedzmy dodać taką o to ikonkę należy dodać kod HTML:

<div class="plus icon"></div>

1	<div class="plus icon"></div>

a następnie kod CSS:

.plus.icon {
  color: #000;
  position: absolute;
  margin-left: 3px;
  margin-top: 10px;
}
.plus.icon:before {
  content: '';
  position: absolute;
  width: 15px;
  height: 1px;
  background-color: currentColor;
}
.plus.icon:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.plus.icon {

color: #000;

position: absolute;

margin-left: 3px;

margin-top: 10px;

}

.plus.icon:before {

content: '';

position: absolute;

width: 15px;

height: 1px;

background-color: currentColor;

}

.plus.icon:after {

content: '';

position: absolute;

width: 15px;

height: 1px;

background-color: currentColor;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

Ikonka za pomocą CSS? – czemu nie

Dodaj swój komentarz do artykułu Anuluj pisanie odpowiedzi