{"id":2022,"date":"2016-08-28T16:56:06","date_gmt":"2016-08-28T16:56:06","guid":{"rendered":"http:\/\/cssreset.com\/?p=2022"},"modified":"2016-08-28T16:56:06","modified_gmt":"2016-08-28T16:56:06","slug":"best-uses-for-fontawesome-icon-fonts","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/best-uses-for-fontawesome-icon-fonts\/","title":{"rendered":"Best Uses for Font Awesome Icon Fonts"},"content":{"rendered":"<p><a href=\"http:\/\/fontawesome.io\/\" target=\"_blank\">Font Awesome<\/a> is a truly awesome tool for easily adding icons to your sites using either HTML or CSS. There are so many varieties of icons to choose from that they Font Awesome icons are really versatile and can be used in so many ways and for so many different types of projects. Here are some of our favorite ways to use this icon font:<\/p>\n<p>1. A really fun way to use Font Awesome icons is to create your site&#8217;s social media icons purely from code &#8212; no pngs or photo editing software necessary. Using icons over images to create your social media icons lets you have greater control over the styling. Check out a tutorial on how to create these social media icons <a href=\"https:\/\/cssdeck.com\/blog\/\/create-social-media-icons-using-font-awesome-and-css\/\" target=\"_blank\">here<\/a>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1964 aligncenter\" alt=\"Screen Shot 2016-06-28 at 9.40.37 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-28-at-9.40.37-AM.png\" width=\"98\" height=\"94\" \/><\/p>\n<p>2. It&#8217;s also really easy to animate Font Awesome icons and use them as a page load progress symbol. This process is a lot simpler than creating a pure CSS loader, and is also a nice alternative to using a gif to produce the same effect.<\/p>\n<p>3. A unique way to use an Icon Font is to style your lists. Any icon can easily take the place of a bullet, disc, or number. All you need to do is set your list-style-type to none and then use the :before pseudo-selector to place any icon of your choice in front of the list items. Find an in-depth tutorial on how to achieve this effect <a href=\"https:\/\/cssdeck.com\/blog\/\/styling-lists-with-css\/\" target=\"_blank\">here<\/a>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1939 aligncenter\" alt=\"Screen Shot 2016-06-06 at 5.40.05 PM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-06-at-5.40.05-PM.png\" width=\"162\" height=\"134\" \/><\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Font Awesome is a truly awesome tool for easily adding icons to your sites using either HTML or CSS. There are so many varieties of icons to choose from that they Font Awesome icons are really versatile and can be [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/best-uses-for-fontawesome-icon-fonts\/\" title=\"Click to read 'Best Uses for Font Awesome Icon Fonts'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2022"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2022"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2022\/revisions"}],"predecessor-version":[{"id":2023,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2022\/revisions\/2023"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}