Sunday, July 15, 2018

Font Awesome Icon

Font Awesome Icon - Halo.. apa kabar teman-teman Teknologi Blogging, Artikel yang teman-teman baca kali ini dengan berjudul Font Awesome Icon, Teknologi Blogging telah mempersiapkan artikel ini dengan sangat baik untuk teman-teman baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Font Awesome, semoga artikel yang disampaikan ini dapat anda pahami dengan baik. ok kalau begitu, selamat membaca.

Judul : Font Awesome Icon
link : Font Awesome Icon

Baca juga


Font Awesome Icon


Sedikit berbagi dan sekedar melengkapi Posting pada blog saya, bagi sahabat blogger yang hoby MenDesain Template, Icon Awesome mungkin sebuah beberapa solusi icon untuk mempercantik atau melengkapi tampilan blog sobat, Icon V4.0.3 ini adalah icon update terbaru dari versi Sebelumnya, ada 11 tambahan icon baru dalam versi ini. oke lagnsung saja kita ketahap pemasanggannya.




Untuk dapat menggunakan icon ini, langkah pertama yang harus sobat lakukan ialah menambah styleshet dibawah ini dan menyimpannya diatas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>



Cara penggunaanya dalam HTML sobat hanya perlu menambahkan tag <i> kemudian class dari nama icon yang dipilih. Misalnya untuk cara penulisannya seperti dibawah ini:


 fa-glass 
<i class="fa fa-glass "></i> fa-glass



Untuk memperbesar ukuran iconnya, maka sobat hanya perlu menambahkan class fa-lgfa-1xfa-2xfa-3xfa-4xfa-5x dan berikut contohnya:

 fa-glass 
 fa-glass 
 fa-glass 
 fa-glass 
 fa-glass 

<p><i class="fa fa-glass  fa-lg"></i> fa-glass </p>

<p><i class="fa fa-glass  fa-2x"></i> fa-glass </p>
<p><i class="fa fa-glass  fa-3x"></i> fa-glass </p>
<p><i class="fa fa-glass  fa-4x"></i> fa-glass </p>
<p><i class="fa fa-glass  fa-5x"></i> fa-glass </p>


untuk membuat icon berada di sebelah kanan atau sebelah kiri Gunakan class pull-right atau pull-left , dan fa-border untuk membuat border pada icon tersebut.

Ini sebuah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left menjadi pull-right. 
<i class="fa  fa-glass fa-2x pull-left fa-border"></i>

Ini sebuah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left menjadi pull-right.


untuk membuat icon agar bisa berputar gunakan class fa-spin. class ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9.

  
<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>



Untuk memutar atau membalik icon, gunakan class fa-rotate-* dan fa-flip-*. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate (putar).


  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  icon-flip-vertical 
<i class="fa fa-shield"></i>&nbsp; normal<br>

<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical



Diatas adalah cara untuk menuliskan Font Awesome dalam sebuah markup HTML, dengan cara lain sobat juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen :before dengan menuliskan value content dari icon tersebut. Berikut gambaran penggunaan Font Awesome pada pseudo elemen CSS:
.element{

    position: relative;
}
/* ganti tulisan berwarna merah pada value content */
.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--custom pada CSS--*/
    color: #333;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}


Demikianlah artikel Font Awesome Icon

Sekianlah dulu artikel Teknologi Blogging tentang Font Awesome Icon kali ini, mudah-mudahan bisa memberi manfaat untuk teman-teman semua jika bermanfaat silahkan sharing arikel ini ke kawan atau kerabat anda ke media sosial seperti facebook, twiter, dan lainnya. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang sedang membaca artikel Font Awesome Icon dengan alamat link https://www.teknologiblogging.net/2018/07/font-awesome-icon.html

Artikel Terkait

Font Awesome Icon
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email