{"id":3393,"date":"2020-06-18T16:13:57","date_gmt":"2020-06-18T16:13:57","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=3393"},"modified":"2020-06-18T16:15:02","modified_gmt":"2020-06-18T16:15:02","slug":"cara-menambahkan-icon-di-website","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","title":{"rendered":"Cara menambahkan icon di Website"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3401\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/attachment\/font-awesome\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&amp;ssl=1?v=1592496652\" data-orig-size=\"1120,630\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Font Awesome\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1024%2C576&amp;ssl=1?v=1592496652\" class=\"aligncenter wp-image-3401\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?resize=407%2C229&#038;ssl=1\" alt=\"\" width=\"407\" height=\"229\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?resize=740%2C415&amp;ssl=1 740w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?resize=310%2C175&amp;ssl=1 310w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?w=1120&amp;ssl=1 1120w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Hallo sobat Hostnic&#8230;<\/p>\n<p>Kembali lagi nih sama mimin, melanjutkan project yang kita buat sebelumnya mimin mau kasih tau nih agar nantinya website yang kita buat tambah kece yaitu penambahan icon. Dengan adanya icon, website tidak menjadi monoton karena bukan hanya sekedar tulisan tetapi ada gambar\/icon yang kita tambahkan.<\/p>\n<p>Untuk menggunakan icon kalian punya beberapa pilihan ya, ada Font Awesome, Bootstrap 3 Icons, dan Google Icons. Tapi disini mimin akan memakai icon dari Font Awesome 6 yang paling terbaru. Karena Font Awesome ini mempunyai library jumlah icon yg dia punya mencapai 7.842 icons, sedangkan untuk icon free 1.588 icons. Artinya kamu bisa pakai library dari Font Awesome ini dengan cuma-cuma loh. Yuk dari pada kelamaan mending langsung ajah.<\/p>\n<p>&nbsp;<\/p>\n<p>Baca Juga :<\/p>\n<p><a href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/\" target=\"_blank\" rel=\"noopener noreferrer\">Membuat navbar lebih rapih<\/a><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Pertama, buka situs\u00a0<a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Awesome<\/a><\/li>\n<li>Kedua, Klik Start for Free dan daftar email kalian untuk mendapatkan Kit Code<\/li>\n<li>Setelah mendapatkan Kit Code, salin Kit Code kamu ke dalam file html<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3404\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/attachment\/screenshot_13\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_13.png?fit=1305%2C734&amp;ssl=1?v=1592496791\" data-orig-size=\"1305,734\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_13\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_13.png?fit=1024%2C576&amp;ssl=1?v=1592496791\" class=\"aligncenter wp-image-3404\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_13.png?resize=637%2C359&#038;ssl=1\" alt=\"\" width=\"637\" height=\"359\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_13.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_13.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_13.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_13.png?resize=310%2C175&amp;ssl=1 310w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_13.png?w=1305&amp;ssl=1 1305w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/li>\n<li>Letakan Kit Code di bagian head file html kamu<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3396\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/attachment\/screenshot_10\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_10.png?fit=1303%2C767&amp;ssl=1?v=1592496122\" data-orig-size=\"1303,767\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_10\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_10.png?fit=1024%2C603&amp;ssl=1?v=1592496122\" class=\"aligncenter wp-image-3396\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_10.png?resize=649%2C383&#038;ssl=1\" alt=\"\" width=\"649\" height=\"383\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_10.png?resize=300%2C177&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_10.png?resize=1024%2C603&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_10.png?resize=768%2C452&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_10.png?w=1303&amp;ssl=1 1303w\" sizes=\"auto, (max-width: 649px) 100vw, 649px\" \/><\/li>\n<li>Jika sudah berhasil, masukan script icon ke dalam file html sebagai uji coba<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3397\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/attachment\/screenshot_11\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_11.png?fit=874%2C717&amp;ssl=1?v=1592496288\" data-orig-size=\"874,717\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_11\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_11.png?fit=874%2C717&amp;ssl=1?v=1592496288\" class=\"aligncenter wp-image-3397\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_11.png?resize=672%2C551&#038;ssl=1\" alt=\"\" width=\"672\" height=\"551\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_11.png?resize=300%2C246&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_11.png?resize=768%2C630&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_11.png?w=874&amp;ssl=1 874w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/li>\n<li>Hasil setelah menggunakan icon<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3398\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/attachment\/screenshot_12\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_12.png?fit=1303%2C665&amp;ssl=1?v=1592496354\" data-orig-size=\"1303,665\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_12\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_12.png?fit=1024%2C523&amp;ssl=1?v=1592496354\" class=\"aligncenter wp-image-3398\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_12.png?resize=679%2C346&#038;ssl=1\" alt=\"\" width=\"679\" height=\"346\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_12.png?resize=300%2C153&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_12.png?resize=1024%2C523&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_12.png?resize=768%2C392&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_12.png?w=1303&amp;ssl=1 1303w\" sizes=\"auto, (max-width: 679px) 100vw, 679px\" \/><\/li>\n<li>Jika sudah seperti diatas berarti html kamu sudah terhubung dengan kit code Font Awesome, cara memakainya kamu cari di situ\u00a0<a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Awesome<\/a> icon-icon yang kamu butuhkan di website kamu.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Hallo sobat Hostnic&#8230; Kembali lagi nih sama mimin, melanjutkan project yang kita buat sebelumnya mimin mau kasih tau nih agar nantinya website yang kita buat tambah kece yaitu penambahan icon. Dengan adanya icon, website tidak menjadi monoton karena bukan hanya sekedar tulisan tetapi ada gambar\/icon yang kita tambahkan. Untuk menggunakan icon kalian punya beberapa [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[246,79,248,82],"tags":[],"class_list":["post-3393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-tutorial","category-v4","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cara menambahkan icon di Website - Hostnic.id<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara menambahkan icon di Website - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"&nbsp; Hallo sobat Hostnic&#8230; Kembali lagi nih sama mimin, melanjutkan project yang kita buat sebelumnya mimin mau kasih tau nih agar nantinya website yang kita buat tambah kece yaitu penambahan icon. Dengan adanya icon, website tidak menjadi monoton karena bukan hanya sekedar tulisan tetapi ada gambar\/icon yang kita tambahkan. Untuk menggunakan icon kalian punya beberapa [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-18T16:13:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T16:15:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?v=1592496652\" \/>\n\t<meta property=\"og:image:width\" content=\"1120\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Monic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Monic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/\"},\"author\":{\"name\":\"Monic\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"headline\":\"Cara menambahkan icon di Website\",\"datePublished\":\"2020-06-18T16:13:57+00:00\",\"dateModified\":\"2020-06-18T16:15:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/\"},\"wordCount\":213,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652\",\"articleSection\":[\"Bootstrap\",\"Tutorial\",\"v4\",\"Website\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/\",\"name\":\"Cara menambahkan icon di Website - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652\",\"datePublished\":\"2020-06-18T16:13:57+00:00\",\"dateModified\":\"2020-06-18T16:15:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652\",\"width\":1120,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-menambahkan-icon-di-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara menambahkan icon di Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\",\"name\":\"hostnic.id\",\"description\":\"Info, Tips dan Tutorial Seputar Layanan Hostnic\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\",\"name\":\"Monic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"caption\":\"Monic\"},\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/author\\\/blog-writer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara menambahkan icon di Website - Hostnic.id","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","og_locale":"id_ID","og_type":"article","og_title":"Cara menambahkan icon di Website - Hostnic.id","og_description":"&nbsp; Hallo sobat Hostnic&#8230; Kembali lagi nih sama mimin, melanjutkan project yang kita buat sebelumnya mimin mau kasih tau nih agar nantinya website yang kita buat tambah kece yaitu penambahan icon. Dengan adanya icon, website tidak menjadi monoton karena bukan hanya sekedar tulisan tetapi ada gambar\/icon yang kita tambahkan. Untuk menggunakan icon kalian punya beberapa [&hellip;]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","og_site_name":"Hostnic.id","article_published_time":"2020-06-18T16:13:57+00:00","article_modified_time":"2020-06-18T16:15:02+00:00","og_image":[{"width":1120,"height":630,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?v=1592496652","type":"image\/png"}],"author":"Monic","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Monic","Estimasi waktu membaca":"1 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/"},"author":{"name":"Monic","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"headline":"Cara menambahkan icon di Website","datePublished":"2020-06-18T16:13:57+00:00","dateModified":"2020-06-18T16:15:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/"},"wordCount":213,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652","articleSection":["Bootstrap","Tutorial","v4","Website"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","name":"Cara menambahkan icon di Website - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652","datePublished":"2020-06-18T16:13:57+00:00","dateModified":"2020-06-18T16:15:02+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652","width":1120,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara menambahkan icon di Website"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnic.id\/blog\/#website","url":"https:\/\/www.hostnic.id\/blog\/","name":"hostnic.id","description":"Info, Tips dan Tutorial Seputar Layanan Hostnic","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnic.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2","name":"Monic","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","caption":"Monic"},"url":"https:\/\/www.hostnic.id\/blog\/author\/blog-writer\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1?v=1592496652","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-SJ","jetpack-related-posts":[{"id":3285,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/cara-menambahkan-favicon-icon-pada-judul-website\/","url_meta":{"origin":3393,"position":0},"title":"Cara menambahkan Favicon \/ icon pada Judul Website","author":"Monic","date":"2020-06-12","format":false,"excerpt":"Hallo sobat hostnic... Ketemu lagi nih sama mimin, kali ini kita akan mengganti icon title atau judul di Website yang akan kita buat. Ternyata gampang banget loh cara menggantinya. Sebelumnya mimin jelasin sedikit dulu nih tentang favicon. Jadi Favicon itu adalah sebutan dari icon title (judul) website. Kalian juga bisa\u2026","rel":"","context":"dalam &quot;Tutorial&quot;","block_context":{"text":"Tutorial","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7.png?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7.png?fit=1200%2C674&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7.png?fit=1200%2C674&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7.png?fit=1200%2C674&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7.png?fit=1200%2C674&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3362,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/","url_meta":{"origin":3393,"position":1},"title":"Cara membuat navbar mudah","author":"Monic","date":"2020-06-16","format":false,"excerpt":"Hallo sobat Hostnic... Ketemu lagi nih sama mimin, hari ini mimin akan membahas tentang cara membuat Navbar atau Navigation Bar di website yang akan kita buat. Navbar adalah sebuah menu di website sehingga pengunjung tidak perlu mencari-cari informasi yang butuhkan tetapi langsung klik button pada navbar saja. Baca sebelumnya :\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":9286,"url":"https:\/\/www.hostnic.id\/blog\/berita\/contoh-coding-html-website-penjualan-dengan-tampilan-menarik\/","url_meta":{"origin":3393,"position":2},"title":"Contoh Coding HTML Website Penjualan: Dengan Tampilan Menarik.","author":"Monic","date":"2024-03-09","format":false,"excerpt":"Halo pembaca yang terhormat, bagaimana kabar Kamu? Selamat datang di artikel ini yang akan membahas contoh coding HTML website penjualan dengan tampilan menarik. Dalam artikel ini, kami akan membahas berbagai kode-kode HTML yang dapat Kamu gunakan untuk menciptakan tampilan website penjualan yang menarik dan memikat. Mari kita jelajahi bersama-sama dan\u2026","rel":"","context":"dalam &quot;Berita&quot;","block_context":{"text":"Berita","link":"https:\/\/www.hostnic.id\/blog\/.\/berita\/"},"img":{"alt_text":"Contoh coding HTML website penjualan","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/download-29.png?fit=620%2C413&ssl=1%3Fv%3D1709964934&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/download-29.png?fit=620%2C413&ssl=1%3Fv%3D1709964934&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/download-29.png?fit=620%2C413&ssl=1%3Fv%3D1709964934&resize=525%2C300 1.5x"},"classes":[]},{"id":3237,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/cara-menggunakan-bootstrap\/","url_meta":{"origin":3393,"position":3},"title":"Cara menggunakan Bootstrap 4 di Website (Offline)","author":"Monic","date":"2020-06-10","format":false,"excerpt":"Hai sobat hostnic... Kali ini mimin mau share nih cara menggunakan Bootstrap di Website kamu. Sebelumnya mimin udah share cara install aplikasi text editor yang akan kita gunakan nanti untuk coding website ini. Silahkan dibaca dulu Cara Install VS Code (Visual Studio Code) Pengertian Bootstrap \u00a0Bootstrap merupakan sebuah library framework\u2026","rel":"","context":"dalam &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=700%2C400 2x"},"classes":[]},{"id":3165,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/cara-install-vs-code-visual-studio-code\/","url_meta":{"origin":3393,"position":4},"title":"Cara install VS Code (Visual Studio Code)","author":"Monic","date":"2020-06-06","format":false,"excerpt":"VS Code atau Visual Studio adalah text editor yang banyak dipakai oleh para programmer saat ini. Nah untuk para pemula jangan galau, hari ini mimin akan kasih tau cara install VS Code ini. Sebelum kita install mimin mau kasih tau kelebihan dari text editor yang satu ini dibanding text editor\u2026","rel":"","context":"dalam &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/vs-code.png?fit=720%2C340&ssl=1%3Fv%3D1591434506&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/vs-code.png?fit=720%2C340&ssl=1%3Fv%3D1591434506&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/vs-code.png?fit=720%2C340&ssl=1%3Fv%3D1591434506&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/vs-code.png?fit=720%2C340&ssl=1%3Fv%3D1591434506&resize=700%2C400 2x"},"classes":[]},{"id":3373,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menghubungkan-html-dengan-css\/","url_meta":{"origin":3393,"position":5},"title":"Cara menghubungkan HTML dengan CSS","author":"Monic","date":"2020-06-17","format":false,"excerpt":"Hallo sobat Hostnic... Kembali lagi nih sama mimin, sekarang kita akan melanjutkan project pembuatan website pribadi yaa. Nah sebelumnya kita sudah membuat navbar dengan library Bootstrap 4, sekarang kita edit dengan menggunakan CSS agar tampilannya makin segar dilihat. Cara membuat navbar mudah Sebelum kita mengedit navbar, langkah sebelumnya adalah menghubungkan\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/comments?post=3393"}],"version-history":[{"count":3,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3393\/revisions"}],"predecessor-version":[{"id":3407,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3393\/revisions\/3407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/3401"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=3393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=3393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=3393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}