{"id":1962,"date":"2016-06-28T13:48:38","date_gmt":"2016-06-28T13:48:38","guid":{"rendered":"http:\/\/cssreset.com\/?p=1962"},"modified":"2016-06-28T13:49:15","modified_gmt":"2016-06-28T13:49:15","slug":"create-social-media-icons-using-font-awesome-and-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-social-media-icons-using-font-awesome-and-css\/","title":{"rendered":"Create Social Media Icons Using Font-Awesome and CSS"},"content":{"rendered":"

Font Awesome<\/a> is a, well, awesome tool that gives developers free access to hundreds of different useful icons to add to their sites and web apps. It’s becoming a really nice alternative to downloading PSD icon sets, largely because since the icons are HTML elements, they can be completely manipulated (color, size, positioning) using CSS. They’re much more dynamic than .jpegs and .pngs.<\/p>\n

Font Awesome has icons for every occasion, but the ones I find myself using most often are the ones that correspond to different social media platforms. Making those popular social media button icons is SO easy using Font Awesome and CSS — no photoshop required.<\/p>\n

To start using Font Awesome, make sure you’ve got their library loaded either on your server or by lining to the Font Awesome CDN<\/a>\u00a0either in the head of your HTML or at the top of your stylesheets using @import, like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
HTML<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css"<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    For the purposes of this tutorial, let’s use one of the more popular social media sites as our example: Facebook. Font Awesome has a few different Facebook icons that you an utilize (check out all their icons here<\/a>).<\/p>\n

    To add the icon<\/a>\u00a0to your site, you’ll need to place the following HTML code wherever you’d like the Facebook icon to show up on your page(s).<\/p>\n

    <i<\/span> class=<\/span>\"fa fa-facebook\"<\/span> aria-hidden=<\/span>\"true\"<\/span>><\/i><\/span><\/code><\/pre>\n
    Each Font Awesome Icon has its own corresponding class, which you can look up on its individual page on Font Awesome’s site. Here’s what the Facebook icon looks like before we apply any styling to it:<\/p>\n
    \"Screen<\/p>\n
    Let’s add some CSS:<\/p>\n
    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. i.fa<\/span>.fa-facebook{<\/span><\/div><\/li>\n
    2. border-radius<\/span>:<\/span> 100%<\/span>;<\/span><\/div><\/li>\n
    3. font-size<\/span>:<\/span> 28px<\/span>;<\/span><\/div><\/li>\n
    4. height<\/span>:<\/span> 38px<\/span>;<\/span><\/div><\/li>\n
    5. line-height<\/span>:<\/span> 40px<\/span>;<\/span><\/div><\/li>\n
    6. margin<\/span>:<\/span> 5px<\/span>;<\/span><\/div><\/li>\n
    7. text-align<\/span>:<\/span> center<\/span>;<\/span><\/div><\/li>\n
    8. width<\/span>:<\/span> 38px<\/span>;<\/span><\/div><\/li>\n
    9. border<\/span>:<\/span> 1px<\/span> solid<\/span> #3B5998<\/span>;<\/span><\/div><\/li>\n
    10. color<\/span>:<\/span> #3B5998<\/span>;<\/span><\/div><\/li>\n
    11. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n
      \"Screen<\/p>\n
      Because the icon is an HTML element, it responds to styling just like any other HTML element, so using CSS, we can apply the signature Facebook blue, we can add a border-radius to make the element round and add a nice, clean border as well. We can play around with the margins, the size of the element, and the size of the icon (which can be adjusted using font-size). We can even add some hover styles and CSS transitions much more easily than if we were working with an image rather than an HTML element. Using icons like these over images makes it a lot easier for developers to get creative using CSS.<\/p>\n
      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
      Font Awesome is a, well, awesome tool that gives developers free access to hundreds of different useful icons to add to their sites and web apps. It’s becoming a really nice alternative to downloading PSD icon sets, largely because since […]<\/p>\n
      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":1964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,7],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1962"}],"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=1962"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1962\/revisions"}],"predecessor-version":[{"id":1966,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1962\/revisions\/1966"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1964"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}