Belajar Cara Menggunakan Font Awesome Pada Bootstrap 4 Part 9 - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Monday, March 11, 2019

Belajar Cara Menggunakan Font Awesome Pada Bootstrap 4 Part 9

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kalian cara menggunakan font awesome pada Bootstrap 4. Caranya gampang banget 

Yang kalian lakukan adalah include boostrap dan include font awesome ke file kalian
Bootstrap
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">

Font awesome
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
Kita buat file terlebih dahulu dengan nama latihan1.html
Kalau sudah let's code

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>List Bootstrap 4</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">

</head>

<body>
  <div class="col-sm-12">
    <ul class="list-inline social-buttons text-center mt-5">
      <li class="list-inline-item">
        <a href="https://www.facebook.com" target="_blank">
          <i class="fab fa-facebook-f"></i>
        </a>
      </li>
      <li class="list-inline-item">
        <a href="https://www.instagram.com" target="_blank">
          <i class="fab fa-instagram"></i>
        </a>
      </li>
      <li class="list-inline-item">
        <a href="https://www.twitter.com" target="_blank">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>

</html>

Hasilnya seperti dibawah ini ya

Gambar 1. Latihan pertama menggunakan font awesome + bootstrap 4

Kalau kamu mau ganti warna bisa kok, tinggal mainin aja css-Nya 
Kodingan menjadi seperti dibawah ini ya
<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>List Bootstrap 4</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">

  <style>
    .row {
      background: #2980b9;
      color: #fff;
    }

    h2 {
      font-family: 'Times New Roman', Times, serif;
    }

    .btn {
      border: 1px solid #fff;
    }

    ul.social-buttons {
      color: gray;
    }

    ul.social-buttons li a {
      font-size: 20px;
      line-height: 50px;
      display: block;
      width: 50px;
      height: 50px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      color: white;
      border-radius: 100%;
      outline: none;
      background-color: #212529;
    }
  </style>
</head>

<body>
  <div class="col-sm-12">
    <ul class="list-inline social-buttons text-center mt-5">
      <li class="list-inline-item">
        <a href="https://www.facebook.com" target="_blank">
          <i class="fab fa-facebook-f"></i>
        </a>
      </li>
      <li class="list-inline-item">
        <a href="https://www.instagram.com" target="_blank">
          <i class="fab fa-instagram"></i>
        </a>
      </li>
      <li class="list-inline-item">
        <a href="https://www.twitter.com" target="_blank">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>
</html>

Hasilnya seperti dibawah ini ya
Gambar 2. Hasil icon font awesome change color + background
Oke Tutorial singkat saja mengenai font awesome, kalian kalian mau lihat daftar tutorial bootstrap bisa lihat dibawah iniya 

Oh iya jika kalian masih bingung juga, bisa check juga di github om bewok.

No comments:

Post a Comment