Membuat ikon dengan CSS.

Daftar isi

Ikon CSS alternatif pengganti web font icons.

Ikon pengganti Web font icons (Font Awesome, Material Icons etc.)

Membuat ikon segitiga dengan CSS

Arah kanan :

<div class='segi3-kanan'></div>

Arah kiri :

<div class='segi3-kiri'></div>

Arah atas :

<div class='segi3-atas'></div>

Arah bawah :

<div class='segi3-bawah'></div>

Segi tiga kanan & kiri

.segi3-kanan {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-left: 10px solid red; /*-- border kiri membentuk sudut arah kanan --*/
	border-bottom: 5px solid transparent;
}
.segi3-kiri {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 10px solid red; /*-- border kanan membentuk sudut arah kiri --*/
	border-bottom: 5px solid transparent;
}

1. Pada segi tiga kanan dan kiri, yang memiliki peran utama sebagai pembentuk visualnya adalah:
   
   • border-top :
     berfungsi untuk membentuk sudut atas.
   • border-left / border-left :
     berfungsi menentukan arah kiri / kanan.
   • border-bottom :
     berfungsi untuk membentuk sudut bawah.
2. Ketebalan border-top / atas (dalam px) = dengan ketebalan border bawah.
3. Ketebalan border-left / border-right >> 2kali ketebalan border atas dan bawah.
4. Ketebalan border-bottom / bawah (dalam px) = dengan ketebalan border atas.

Segi tiga atas & bawah

.segi3-atas {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid red; /*- warna ikon -*/
}
.segi3-bawah {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid red; /*- warna ikon -*/
}
  

Membuat ikon tanda panah dengan CSS

Arah kanan:

<i class='arah kanan'></i>

Arah kiri:

<i class='arah kiri'></i>

Arah atas:

<i class='arah atas'></i>

Arah bawah:

<i class='arah bawah'></i>

.arah {
  border: solid red; /*- warna ikon -*/
  border-width: 0 3px 3px 0;
  display: inline-block;
  vertical-align:middle;
  padding: 3px;/*-- opsional --*/
  margin:7px 10px;/*-- opsional --*/
}
.kanan {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.kiri {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.atas {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.bawah {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
  

⇐ Sebelumnya

Selanjutnya ⇒