Kenapa Icon Boostrap Tidak Muncul?

Discussion in 'HTML & Website Design' started by wrep17, Aug 23, 2017.

  1. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,326
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Halo warga bersosial, sedang apa kalian saat ini? Semoga sehat semua dan diberikan kemudahan saat menjalankan aktivitas sehari-hari.

    Sesuai dengan judul diatas, saya ingin bertanya kira-kira kenapa ya? Penyebab permasalahannya apa?
    Saya sudah memasukkan code ini
    Code:
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    Terus saya coba browsing dan ketemu sama Stack Overflow suruh masukkin code tambahan atau font face, saya milih yang ini aja
    Code:
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    Akhirnya BISA MUNCUL.
    Akan tetapi, semuanya menjadi mengerut / mengecil berbeda saat sebelum script itu dimasukkan. Agar lebih jelas, mari lihat penampakan berikut.

    Sebelum diberi Code Tambahan
    [​IMG]

    Sesudah diberi Code Tambahan
    [​IMG]

    Ayo2 yang tau pada jawab :p
     
  2. ziuma

    ziuma Well-Known Member

    Joined:
    May 23, 2014
    Messages:
    1,482
    Likes Received:
    221
    Trophy Points:
    63
    Google+:
    kalau kodenya seperti dibawah ini, kira-kira muncul ngak

    Code:
    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' id='fontawesome' rel='stylesheet' type='text/css'/>
    Code:
    <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
    bisa dilihat diblognya @KangAndre

    Code:
    https://www.lenteraseo.com/mengapa-icon-font-awesome-tidak-muncul
     
    wrep17 likes this.
  3. acep saepul

    acep saepul Member

    Joined:
    Jan 4, 2017
    Messages:
    74
    Likes Received:
    2
    Trophy Points:
    8
  4. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,326
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
  5. ys. herbi

    ys. herbi Well-Known Member

    Joined:
    Mar 6, 2016
    Messages:
    1,251
    Likes Received:
    191
    Trophy Points:
    63
    Google+:
    hmm.. nggak ngeh..
    nyimak buat belajar
     
  6. Yayan Casper

    Yayan Casper Member

    Joined:
    Jul 18, 2014
    Messages:
    679
    Likes Received:
    78
    Trophy Points:
    28
  7. Garett

    Garett Super Level

    Joined:
    Apr 13, 2015
    Messages:
    1,094
    Likes Received:
    1,048
    Trophy Points:
    163
    Google+:
    Itu masalah pada sumber CSS. Selalu gunakan versi 3.x sampai dua tahun mendepan karena alasan kestabilitas dan long-term.

    Saya liat kamu gunakan CSS CDN bersumber dari sumber berbeda sudah kamu cek kalau css satu dengan yang kedua itu berbeda? Yang kedua itu bersi fix 3.0.0 dan hanya menyediakan glyphicons. Padahal versi 3.2+ glyphicons menjadi satu.

    Saran saya gunakan CDN yang berasal dari halaman ini: https://getbootstrap.com/docs/3.3/getting-started/
    Masalah teratasi.
     
  8. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,326
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Ya sepertinya begitu, saya agak lupa dapetnya darimana :D

    Oh iya dapetnya dari sini https://www.bootstrapcdn.com/
     
  9. iwan008

    iwan008 Member

    Joined:
    Aug 17, 2017
    Messages:
    271
    Likes Received:
    28
    Trophy Points:
    28
    pusing ane liat nya,,,nyimak dulu aja siapa tau tar jadi bisa
     
  10. Firmanz

    Firmanz Member

    Joined:
    Aug 24, 2017
    Messages:
    46
    Likes Received:
    6
    Trophy Points:
    8
    aku hanya bisa nyimak saja :(
     
  11. Acep Husen

    Acep Husen Member

    Joined:
    Apr 8, 2018
    Messages:
    20
    Likes Received:
    2
    Trophy Points:
    8
    Kalau ini cara saya ya mas, saya download terlebih dahulu bootstrapnya dan jquery jadi untuk bagian <HEAD> seperti ini :
    Code:
    <head><meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script></head>
    
    Pada tag <body> kalau kita mau link kita pakai icon jadinya seperti ini :
    Code:
    <a href="https://apapun.com" class="btn btn-primary"><span class="glyphicon glyphicon-list"></span> Klik Link</a>
    
    Selamat mencoba CMIIW
     
    Last edited by a moderator: Apr 12, 2018
  12. ncang

    ncang Super Level

    Joined:
    Feb 7, 2013
    Messages:
    4,637
    Likes Received:
    756
    Trophy Points:
    113
    Google+:
    hanya saran, forum ini bisa nulis [ code ] [ / code ] jadi lebih terlihat rapih
    Code:
    kodenya disini
    
     
    Acep Husen likes this.
  13. Acep Husen

    Acep Husen Member

    Joined:
    Apr 8, 2018
    Messages:
    20
    Likes Received:
    2
    Trophy Points:
    8
    ohh pakai itu hehehe aduh makasih banget kang hehehe biasanya ada di editor bar hehehe makasih ya sarannya hehehe
     
  14. Lusfikars

    Lusfikars New Member

    Joined:
    Jun 2, 2018
    Messages:
    8
    Likes Received:
    0
    Trophy Points:
    1
    Paling gampang, download ionicons, karena bootstrap 4 gak include icon. Terus link css dan jsnya seperti ini:

    <link href="/path/to/ionicons/css/ionicons.min.css" rel="stylesheet"> <!--icon pengganti-->
    <link href="/path/to/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/path/to/jquery/jquery.min.js"></script> <!-- harus ada -->
    <script src="/path/to/bootstrap/js/bootstrap.bundle.min.js"></script>
     
Loading...

Share This Page