Cara mengatur ukuran icon bootstrap

Glyphicon adalah icon-icon yang siap dipakai pada website jika kita memakai framework CSS yaitu Bootstrap. Bootstrap menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah, ada sangat banyak icon yang disediakan oleh bootstrap, masing-masing sudah diberi nama dan kita hanya perlu memanggil nama class nya masing-masing untuk menampilkan icon bootstrap yang diinginkan.

Table of Contents Show

Default setting ukuran font
Praktek siswa
Langkah membuat file html dan css
isi pada bagian kiri
Warna standard
Warna Background
mengisi bagian kanan
font awesome
Membuat List
Membuat table

Untuk menampilkan icon bootstrap yang pertama kali harus di lakukan adalah menambahkan class “glyphicon” di dalam tag <span> pembuka atau tag lainnya, setelah menambahkan class glyphicon kemudian tambahkan nama class icon masing-masing sesuai dengan icon yang ingin kita inginkan.

Fitur glyphicons tidak bisa digunakan secara langsung di versi 4 ini, ada beberapa langkah yang harus dilakukan, yaitu :

Unduh file glyphicons.css di sini
Simpan di folder css bootstrap project web kita
Coding di bagian header untuk deklarasi penggunaan file css tersebut, contoh : <link rel=”stylesheet” type=”text/css” href=”../assets/css/glyphicons.css”>

Contoh :

<!DOCTYPE html>
<html>
    <head>
        <!-- Menghubungkan dengan bootstrap & glyphicons, sesuaikan dengan direktory file masing-masing -->
        <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../assets/css/glyphicons.css">
        
        <title>Tutorial Membuat Icon Dengan Bootstrap 4</title>
    </head>

    <body>
        <div class="container">

            <br>
            <div class="container">
                <h1>Cara Membuat Icon Dengan Bootstrap</h1>
                <p>Icon surat: <span class="glyphicon glyphicon-envelope"></span></p>
                <p>Icon surat sebagai link:
                    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
                </p>
                <p>Icon hati: <span class="glyphicon glyphicon-heart"></span></p>
                <p>Icon hati di atas tombol:
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-search"></span> Search
                    </button>
                </p>
                <p>Icon Print: <span class="glyphicon glyphicon-print"></span></p>
                <p>Icon Print di atas tombol besar ("btn-lg"):
                    <a href="#" class="btn btn-success btn-lg">
                        <span class="glyphicon glyphicon-print"></span> Print
                    </a>
                </p>
            </div>
        </div>
    </body>
</html>

Hasilnya :

Pada contoh di atas bahwa icon glyphicon bootstrap dapat ditambahkan pada semua element html, seperti tombol, link dan lainnya, ukuran icon glyphicon bootstrap ini mengikuti ukuran font.

Dalam mengatur tampilan, pengaturan Text merupakan hal utama. Di dalam bootstrap telah disediakan beberapa class yang dapat mempercepat kerja kita dalam mengatur tampilan tulisan, membuat icon-icon yang umum digunakan dan menggabungkan icon dengan hyperlink menjadi suatu button yang menarik.

Default setting ukuran font

Saat pertama kali menggunakan bootstrap, maka kita tahu bahwa font yang digunakan bukan font standard milik web.
Berikut adalah setting Standard font yang digunakan oleh bootstrap

body {
  font-family: "Helvetica";
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

Praktek siswa

pada bagian berikut akan diperlihatkan dalam praktek siswa beberapa cara mengubah penampilan dari teks dengan menggunakan class yang telah disediakan bootstrap.
Perlu dijelaskan bawah pada bootstrap 4 tidak ada lagi glyphicon, maka apabila kita ingin menggunakan font berbentuk simbol kita harus menambahkan secara manual
alternatif glyphicon pada bootstrap adalah http://fontawesome.io/
- berikut adalah langkah melakukan download dan menggabungkan dengan project saat ini.
- buka website fontawesome
- klik pada download
- lakukan extract file zip yang sudah didownload
- copy file css yang ada di dalam folder css ke dalam folder project yang kita buat (font-awesome.min.css)
- copy folder fonts ke dalam folder project kita

Langkah membuat file html dan css

Jalankan program Brackets, pilih menu open folder dan buka folder tempat anda bekerja
pilih menu File, new dan simpan dengan nama typography.css
pilih menu File, new dan simpan dengan nama typography.html
seperti langkah pada praktek sebelumnya buat dokumen html standard bootstrap dengan menggunakan emmet
beberapa kata kunci emmet:
- ! (tanda seru)
- meta:vp
- link (arahkan ke 3 css, bootstrap, font-awesome, typography)
- script:src (arahkan ke 2 file js yaitu jquery dan bootstrap)
hasil akhir typography.html dapat dilihat pada ketikan berikut:



  
  Typography
  
  
    
  


  ...

pada file typography.css ketik file berikut:

.kiri, .kanan {
  margin-top: 20px;
  padding-top: 20px;
  height: 1200px;
  color: white;
  font-size: 20px;
}
.kiri {
  background-color: #53777A;
}
.kanan {
  background-color: #C02942;
}

ketik div.container-fluid
ketik div.row>div.col-sm-6.kiri+div.col-sm-6.kanan, untuk membagi menjadi 2

isi pada bagian kiri

dengan menggunakan teknik emmet cobalah untuk mengetik kode html berikut:

Text style

tebal

miring

underline

ini subscript superscript

dicoret

Perataan

Rata Kiri

Rata tengah

rata kanan

Warna standard

text-muted

primary

info

success

warning

danger

Warna Background

bg-warning

bg-primary

bg-inverse

mengisi bagian kanan

font awesome

menggunakan font symbol

untuk daftar dapat di lihat di link http://fontawesome.io/icons/

abrv

HTML

label

berita satu

berita dua new

berita tiga New

List

Mobil
- Toyota
- suzuki
Motor
- honda
- yamaha
Sepeda

penjelasan
- HTML
- abbr harus diikuti dengan title yang berisi kepanjangan dari teks singkatan
- membuat button bisa dengan banyak cara ada 2 cara yang umum
- menggunakan tag hyperlink a href
- menggunakan tag input type button
  - gunakan emmet: input:b.btn.btn-primary
untuk mengatur ukuran font awesome dan warna dapat menggunakan tag css berikut:

.icon-biru {
  color:aqua;
  font-size: 70px;
}

pada css diatas glyphicon akan diubah besarnya menjadi 70px (defaultnya adalah 14px)
warna diubah menjadi biru

Membuat List

pada umumnya style dibuat dengan menggunakan gabungan tag ul dan li
bootstrap sudah menyiapkan beberapa nama class untuk list yaitu
- list-inline dan list-inline-item agar data ditampilkan secara mendatar
- list-unstyled, secara default list akan tampak bullet atau angka, bila menggunakan unstyled, bullet dan angka akan dihilangkan.

Membuat table

lanjutkan mengisi bagian kanan dengan membuat tabel berikut:
- ketik div.table-responsive
- ketik table.table.table-bordered.table-hover.text-warning>(thead>tr>th*3)+(tbody>tr>td*3)*4

Nama	Alamat	Telp
Novi	Manyar	3721111
Budi	Manyar	3762222
Andri	Jagalan	3713333
Yeni	Jagalan	3714444

Penjelasan
- table-responsive bertujuan untuk menampilkan horizontal scroll bar pada alat ukuran hp
- table-bordered agar memberi bingkai di seluruh tabel
- table-hover agar saat mouse ada di atas suatu baris akan tampak berubah warna
- table-striped agar baris warna ganjil dan genap dibedakan.