Kode script Font Awesome x twitter update
Arif Sunarko X YouTuber
1 min read
Pembuatan web sepertinya susah, karena banyak komponen yang harus dibuat. Seperti background dan ikon.
Bagi seorang desainer, mungkin tidak masalah membuat banyak gambar background dan ikon.
Tapi, bagi programmer atau developer…ini sangat merepotkan.
Untunglah ada Font-awesome, yang merupakan framework CSS untuk membuat ikon.
Font-awesome memiliki ratusan ikon yang bisa kita gunakan.
Pada tulisan ini, kita akan belajar cara membuat ikon menggunakan Font-awesome.
Dimulai dari tahap instalasi sampai ke pembuatan animasi.
Mari kita mulai…
Cara ubah melalui kode css :
.fa.fa-twitter{
font-family:sans-serif;
}
.fa.fa-twitter::before{
content:"𝕏";
font-size:1.2em;
}Cara mengubah menggunakan class name :
<i class="fa-brands fa-square-x-twitter"></i>
<i class="fa-brands fa-x-twitter"></i><i class="fab fa-x-com"></i>
<i class="fab fa-x-app"></i>
<i class="fab fa-x-twitter"></i>
Cara edit dengan link stylesheet :
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css' rel='stylesheet' type='text/css'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css' rel='stylesheet' type='text/css'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Cara edit dengan svg :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
Apabila sebelumnya menggunakan versi 4.3.0, silakan diganti dengan versi 4.7.0 karena itu versi terbaru. Itulah pengertian Font Awesome dan cara menggunakan Font Awesome di Blogspot/Blogger.*
