Cara menambahkan icon pada html

-

Dalam pembuatan suatu Web itu banyak sekali yang harus kita masukan  kode didalam htmlnya seperti gambar atau background dan icon.bagi seorang pemula  yang ingin menjadi seorang progammer, itu membuat kepala pusing dan susah. 

Nah Maka dari itu,ada font-awesome yang membantu kita untuk mempermudah kita untuk menambahkan Icon-icon yang bisa kita pakai dengan mudah .Font-awesome ini memiliki banyak sekali icon-icon yang Bisa kita gunakan.mari sama-sama simak Tutorial berikut

Menambahkan Icon dengan Font-awesome

Cara menggunakan Font-awesome sama seperti cara menggunakan framework CSS pada umumnya.

Kita tinggal me-link-kan file CSS-nya ke dalam HTML. Kemudian, tinggal panggil nama-nama class-nya.

Contoh: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

Ikon dapat kita buat dengan tag <i> yang disertai kelas fa (font-awesome). pada Font-awesome disarankan menggunakan tag <i>. Karena lebih pendek.

Contoh dan Hasilnya

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


fa adalah nama kelas Font-awesome, wajib ada di setiap pembuatan ikon.

fa-star adalah nama ikon yang akan dipakai. Daftar nama-nama ikonnya kalian bisa melihat icon-iconnya, 

Disini Lihatnya! 

CARA MENAMBAHKAN ATAU MENGUBAH WARNA PADA ICON

Pada dasarnya Font-awesome akan mengikuti warna teks dari sebuah elemen.

Berarti, untuk mengubah warna ikon font-awesome, kita harus merubah warna untuk teksnya.

Contoh: 

<p>

<i class="fa fa-star" style="color: pink"></i> berwarna berwarna pink

</p>

Sekian dari tutorial saya semoga kalian paham akan tutorial yang saya berikan Terima kasih






Comments

Post a Comment

Popular posts from this blog

fitur -fitur yang ada pada arduino

-
Image
  ini adalah yang ada pada fitur-fitur arduino ! Menu New , berfungi untuk membuka lembar (Sketch) kerja baru. Open, berfungsi untuk membuka Sketch yang pernah dibuat pada media penyimpanan. Open Recent , berfungsi untuk mempersingkat waktu dalam membuka Sketch, file yang di buka merupakan Sketch terbaru atau yang terakhir tersimpan. Sketchbook, berfungsi untuk menampilakn Sketch yang sudah tersimpan di dalam folder Arduino. Example , berisi berbagai contoh kode program yang disediakan oleh pengembang. Close , berfungsi menutup jendela Arduino IDE sekaligus menghentikan Aplikasi. Save , berfungsi menyimpan Sketch yang telah dibuat. Save as , berfungsi menyimpan Sketch  dengan nama yang berbeda. Page Setup, berfungsi mengatur tampilan page seperti paper, orientation, margins untuk pencetakan  Sketch. Print, berfungsi mengirimkan file Sketch ke mesin cetak untuk dicetak atau di buatkan menjadi file pdf. Preferences, berfungsi merubah tampilan interface Arduino IDE. Qui...
Read more

Cara mengatasi port arduino tidak terdeteksi

-
Image
  Arduino IDE (Integrated Development Environment)  adalah software yang di gunakan untuk memprogram di arduino, dengan kata lain Arduino IDE sebagai media untuk memprogram board Arduino. Arduino IDE bisa di download secara gratis di website resmi   Arduino IDE.  Arduino IDE ini berguna sebagai text editor  untuk membuat,  mengedit, dan juga mevalidasi kode program. bisa juga digunakan untuk meng-upload ke board Arduino.  Kode program yang digunakan pada Arduino disebut dengan istilah Arduino “ sketch ”  atau disebut juga source code arduino, dengan ekstensi file source code        banyak sekali pengguna applikasi arduino mengeluh tentang mengapa port yang ada di dalam  applikasi arduino tidak terdeteksi.nah maka dari itu saya akan memberitahu   bagaimana cara mengatasinya.Langkah pertama kalian harus mendownload driver untuk port di arduino yaitu  CH 340G driver. 1 .klik kanan pada Setup Driver lalu "run as adm...
Read more