{"id":18598,"date":"2020-06-29T04:08:28","date_gmt":"2020-06-29T11:08:28","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18598"},"modified":"2020-12-29T11:37:46","modified_gmt":"2020-12-29T19:37:46","slug":"css-icons","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-icons\/","title":{"rendered":"How to Insert Icons Using a CDN"},"content":{"rendered":"\n<p>Icons work well for illustrating actions a user can take in an application. There are several icon libraries readily available. Here are a few of the many:&nbsp;<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Font Awesome &#8211; <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">https:\/\/fontawesome.com\/<\/a><\/li><li>Flaticon &#8211; <a href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">https:\/\/www.flaticon.com\/<\/a><\/li><li>Material Design Icons &#8211; <a href=\"https:\/\/material.io\/resources\/icons\/?style=baseline\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">https:\/\/material.io\/resources\/icons\/<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>There are certainly many more than mentioned above, but the goal of this guide is to show you how to utilize one of the above libraries for your project and target it to control the style. Besides,once you learn the process for one library, it\u2019s very similar for others.&nbsp;<br><\/p>\n\n\n\n<p>In this article, we\u2019ll use the Font Awesome Icon Library. In the editor below, take notice of the <code>&lt;link&gt;<\/code> in the head of the HTML document. This is a minified CSS file that basically references Font Awesome\u2019s library of icons. \u201cMinified\u201d basically refers to the fact that all the whitespace is gone \u2013 so there really isn\u2019t any formatting.&nbsp;<br><\/p>\n\n\n\n<p>As long as you have this <strong>content delivery network<\/strong> \u2013&nbsp; CDN \u2013&nbsp; in the <code>&lt;head&gt;<\/code>, you\u2019ll be able to access almost all of Font Awesome\u2019s free library. There is a SVG library as well, but we\u2019ll get into that when we talk more about JavaScript.&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n   &lt;head&gt;\n       &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/use.fontawesome.com\/releases\/v5.1.0\/css\/all.css&quot;&gt;\n       &lt;meta charset=&quot;UTF-8&quot;&gt;\n       &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n       &lt;title&gt;Icons&lt;\/title&gt;\n       &lt;style&gt;\n           .icon-container {\n               font-size: 24px;\n           }\n           .fab {\n               font-size: 3rem;\n               color: #1DA1F1;\n           }\n           .fa-heart {\n               font-size: 4rem;\n               color: crimson;\n           }\n       &lt;\/style&gt;\n      \n   &lt;\/head&gt;\n   &lt;body&gt;\n       &lt;!-- Icons will go here --&gt;\n       &lt;div class=&quot;icon-container&quot;&gt;\n           &lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;\/i&gt;\n           &lt;span class=&quot;fas fa-camera&quot;&gt;&lt;\/span&gt;\n           &lt;span class=&quot;fas fa-heart&quot;&gt;&lt;\/span&gt;\n \n       &lt;\/div&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>In the editor above, you\u2019ll see in the body that we have two inline elements, an <code>&lt;i&gt;<\/code> and a <code>&lt;span&gt;<\/code> element. Either way is a valid way to write out icons in your markup. I\u2019ve personally seen <code>&lt;i&gt;<\/code>&nbsp; used the most, but I\u2019ve also seen <code>&lt;span&gt;<\/code> on the rare occasion.&nbsp;<br><\/p>\n\n\n\n<p>You\u2019ll see that the contents of the element are empty. The class attribute is how we pull the icon we need from Font Awesome\u2019s library using the CSS file we inserted into the head of the HTML file.&nbsp;<br><\/p>\n\n\n\n<p>If you\u2019d like to take a look at the CSS file to see what you\u2019re working with, you can certainly do that. It\u2019ll give you a wall of text though, so it might be a bit overwhelming. Just know that it has all the information you need to insert free icons into your project.&nbsp;<br><\/p>\n\n\n\n<p>The class name of the icon has two parts: the style prefix and the icon name. In the example above, we see \u201cfab\u201d and \u201cfas\u201d. The \u201cfa\u201d stands for font awesome, the \u201cb\u201d stands for brand and the \u201cs\u201d stands for solid. There are other prefixes as well, but these require a PRO account.&nbsp;<br><\/p>\n\n\n\n<p>The icon name can be found when you are perusing the icons gallery on Font Awesome\u2019s website. It will usually follow the convention you see above: \u201cfa-&lt;name of icon&gt;\u201d.<br><\/p>\n\n\n\n<p>Icons are to be treated like inline elements when styling them and controlling their position on the page with CSS. For more information about styling Font Awesome\u2019s icons, please see their <a href=\"https:\/\/fontawesome.com\/how-to-use\/on-the-web\/styling\/sizing-icons\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">docs<\/a>, which are really straightforward and will help you get some practice in reading documentation. An example of styling using CSS is in the editor above.&nbsp;<br><\/p>\n\n\n\n<p>Feel free to use the sandbox environment above to play with icons and start styling them!&nbsp; <\/p>\n","protected":false},"excerpt":{"rendered":"Icons work well for illustrating actions a user can take in an application. There are several icon libraries readily available. Here are a few of the many:&nbsp; Font Awesome - https:\/\/fontawesome.com\/Flaticon - https:\/\/www.flaticon.com\/Material Design Icons - https:\/\/material.io\/resources\/icons\/ There are certainly many more than mentioned above, but the goal of this guide is to show you&hellip;","protected":false},"author":77,"featured_media":18599,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18598","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Insert Icons Using a CDN | Career Karma<\/title>\n<meta name=\"description\" content=\"Icons are a special type of HTML element you can use in your projects. Here we will learn how to use a CDN to insert icons into your web applications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-icons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Insert Icons Using a CDN\" \/>\n<meta property=\"og:description\" content=\"Icons are a special type of HTML element you can use in your projects. Here we will learn how to use a CDN to insert icons into your web applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-29T11:08:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:37:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"How to Insert Icons Using a CDN\",\"datePublished\":\"2020-06-29T11:08:28+00:00\",\"dateModified\":\"2020-12-29T19:37:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/\"},\"wordCount\":531,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-icons\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-icons\/\",\"name\":\"How to Insert Icons Using a CDN | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg\",\"datePublished\":\"2020-06-29T11:08:28+00:00\",\"dateModified\":\"2020-12-29T19:37:46+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Icons are a special type of HTML element you can use in your projects. Here we will learn how to use a CDN to insert icons into your web applications.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-icons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-icons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Insert Icons Using a CDN\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/cmvnk\"],\"url\":\"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Insert Icons Using a CDN | Career Karma","description":"Icons are a special type of HTML element you can use in your projects. Here we will learn how to use a CDN to insert icons into your web applications.","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:\/\/careerkarma.com\/blog\/css-icons\/","og_locale":"en_US","og_type":"article","og_title":"How to Insert Icons Using a CDN","og_description":"Icons are a special type of HTML element you can use in your projects. Here we will learn how to use a CDN to insert icons into your web applications.","og_url":"https:\/\/careerkarma.com\/blog\/css-icons\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-29T11:08:28+00:00","article_modified_time":"2020-12-29T19:37:46+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-icons\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-icons\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"How to Insert Icons Using a CDN","datePublished":"2020-06-29T11:08:28+00:00","dateModified":"2020-12-29T19:37:46+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-icons\/"},"wordCount":531,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-icons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-icons\/","url":"https:\/\/careerkarma.com\/blog\/css-icons\/","name":"How to Insert Icons Using a CDN | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-icons\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg","datePublished":"2020-06-29T11:08:28+00:00","dateModified":"2020-12-29T19:37:46+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Icons are a special type of HTML element you can use in your projects. Here we will learn how to use a CDN to insert icons into your web applications.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-icons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-icons\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/harpal-singh-_zKxPsGOGKg-unsplash.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-icons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"How to Insert Icons Using a CDN"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18598"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18598\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18599"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}