{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/font-awesome-is-awesome/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"4476e2d2-86bd-5155-8766-3f543e8e90c8","timeToRead":2,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Font Awesome is Awesome!\",\n  \"date\": \"2016-11-27T14:35:58.810Z\",\n  \"template\": \"post\",\n  \"draft\": false,\n  \"slug\": \"font-awesome-is-awesome\",\n  \"category\": [\"resources\"],\n  \"tags\": [\"Design\", \"Font Awesome\"],\n  \"description\": \"What’s special about an icon font. Icon fonts are vector-based: they load fast and are completely scalable (w/ a little CSS). An example of an icon font is Font Awesome. There are tons of different…\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h3\", {\n    \"id\": \"font-awesome-isawesome\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#font-awesome-isawesome\",\n    \"aria-label\": \"font awesome isawesome permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Font Awesome is\\xA0Awesome!\"), mdx(\"h4\", {\n    \"id\": \"are-you-concerned-that-icons-are-slowing-down-your-siteapp-you-shouldnt-be-if-you-are-using-an-iconfont\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#are-you-concerned-that-icons-are-slowing-down-your-siteapp-you-shouldnt-be-if-you-are-using-an-iconfont\",\n    \"aria-label\": \"are you concerned that icons are slowing down your siteapp you shouldnt be if you are using an iconfont permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"em\", {\n    parentName: \"h4\"\n  }, \"Are you concerned that icons are slowing down your site/app? You shouldn\\u2019t be if you are\"), \" using \", mdx(\"em\", {\n    parentName: \"h4\"\n  }, \"an icon\\xA0font!\")), mdx(\"figure\", null, mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/font-awesome-is-awesome-0.jpeg\",\n    \"alt\": null\n  }))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"What\\u2019s special about an icon font.\"), \" Icon fonts are vector-based: they load fast and are completely scalable (w/ a little CSS). An example of an icon font is \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://fontawesome.io/\"\n  }, \"Font Awesome\"), \". There are tons of different fonts depending on the style/type of icons you are looking for.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"What is Font Awesome?\"), \" Font Awesome is a fully open source collection of 400+ icons to use on your next web project.\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://fontawesome.io\",\n    \"title\": \"http://fontawesome.io\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Font Awesome, the iconic font and CSS toolkit\"), mdx(\"br\", {\n    parentName: \"a\"\n  }), \"_\", \"Font Awesome, the iconic font and CSS framework_fontawesome.io\"), mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://fontawesome.io\"\n  })), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"I\\u2019ll repeat. These icons are scalable vectors, which means they will load faster on your page than a pixel-based image\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Easy-to-set up. If you know HTML/CSS then you will have no trouble using Font Awesome\\xA0:) There\\u2019s no JavaScript involved.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use CSS to style them however you please without worrying about compromising the quality of the icon.\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Where can I get Font Awesome?\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Just paste the the Bootstrap CDN code below into the top of your HTML document and head over to Font Awesome to browse through the available icons.\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Thanks to the generous folks at\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://maxcdn.com/\"\n  }, mdx(\"em\", {\n    parentName: \"a\"\n  }, \"MaxCDN\")), mdx(\"em\", {\n    parentName: \"p\"\n  }, \", you can use Bootstrap CDN to add Font Awesome into your website with a single line of code. You don\\u2019t even have to download or install anything!\"))), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Paste the following code into the\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_<head>_\"), \" \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"section of your site's HTML.\"))), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_<link href=\\\"//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css\\\" rel=\\\"stylesheet\\\">_\"))), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Or you can actually download Font Awesome by visiting the \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://fortawesome.github.io/Font-Awesome/get-started/\"\n  }, \"FA github page\"), \" (they have a version available for Rails projects)\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Font Awesome doesn\\u2019t have the icon I need!\"), \" If out of the 400+ icons that Font Awesome offers there\\u2019s one that you need that they don\\u2019t have. You can either:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Double check the \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://fortawesome.github.io/Font-Awesome/cheatsheet/\"\n  }, \"Font Awesome Cheatsheet\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Use a font icon search engine/font generator: \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"These sites are great if a font doesn\\u2019t include all of the icons you need for a project or if you would like to reduce the font\\u2019s file size removing the icons you don\\u2019t need.\"))), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://glyphsearch.com/\"\n  }, \"Glyph Search\"), \" to peruse not only FontAwesome but other icon fonts as well (Glyphicons, IcoMoon, Ionicons + octicons).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://fontello.com/\"\n  }, \"Fontello\"), \" lets you search various fonts, (including: Font Awesome, Fontelico, Entypo, Typicons + more) and actually mix n\\u2019 match to create your own file with a combination of icons from the various collections.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Create your own font on \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://fontastic.me/\"\n  }, \"Fontastic\"), \" from their collection of 9,000 + free fonts & upload your own icons as well\\xA0:)\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Make your own\\xA0.svg icon + import into Fontastic if you\\u2019re feeling creative.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons\"\n  }, \"Request\"), \" that a new icon is added to Font Awesome.\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Will Font Awesome always be free?\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://medium.com/u/eb1e7909794b\"\n  }, \"Dave Gandy\"), \" the creator of Font Awesome recently raised over \\\\$70k to design Black Tie, a commercial icon font. The proceeds from Black Tie will allow him to continue working on Font Awesome! woo-hoo.\"), mdx(\"figure\", null, mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/font-awesome-is-awesome-1.jpg\",\n    \"alt\": null\n  }))), mdx(\"p\", null, \"\\u201CI am still very comitted to maintaining and improving the original Font Awesome. That\\u2019s why I\\u2019ve built rewards into the Black Tie \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://medium.com/u/f96369d3473d\"\n  }, \"Kickstarter\"), \" that are designed to benefit the original Font Awesome, too.\\u201D Dave Gandy, Black Tie Kickstarter Site\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Update: Font Awesome 5\\u2019s\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.kickstarter.com/projects/232193852/font-awesome-5\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Kickstarter\")), \" \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"has ended but they are offering\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://font-awesome-5.backerkit.com/hosted_preorders\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"pre-orders for discounted licenses\\u200A\")), mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u2014\\u200A\"), mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Student / Non-Profit License $20 and Personal / Small Business License $40.\")), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://font-awesome-5.backerkit.com/hosted_preorders\",\n    \"title\": \"https://font-awesome-5.backerkit.com/hosted_preorders\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Pre-order Font Awesome 5 on BackerKit\"), mdx(\"br\", {\n    parentName: \"a\"\n  }), \"_\", \"BackerKit is the world's most trusted post-crowdfunding platform.\", \"_\", \"font-awesome-5.backerkit.com\"), mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://font-awesome-5.backerkit.com/hosted_preorders\"\n  })), mdx(\"p\", null, \"There are a ton of different icon fonts out there! Font Awesome just happens to be one of my favorites. Have you used Font Awesome before? What\\u2019s your \\u201Cgo to\\u201D icon font? Share in a comment below.\"), mdx(\"p\", null, \"This post was originally published on \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.blacktechdiva.com\"\n  }, \"Black Tech Diva\"), \".\"));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#font-awesome-isawesome","title":"Font Awesome is Awesome!","items":[{"url":"#are-you-concerned-that-icons-are-slowing-down-your-siteapp-you-shouldnt-be-if-you-are-using-an-iconfont","title":"Are you concerned that icons are slowing down your site/app? You shouldn’t be if you are using an icon font!"}]}]},"frontmatter":{"title":"Font Awesome is Awesome!","date":"November 27, 2016","description":"What’s special about an icon font. Icon fonts are vector-based: they load fast and are completely scalable (w/ a little CSS). An example of an icon font is Font Awesome. There are tons of different…","tags":["Design","Font Awesome"]}},"allWebMentionEntry":{"edges":[]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/font-awesome-is-awesome/","slug":"/blog/font-awesome-is-awesome/","prev":{"id":"705b41f0-e095-58b7-bb43-df8128099712","frontmatter":{"title":"Hide Your API Keys","category":["tutorial"],"date":"2017-01-26T01:23:25.000Z","slug":"hide-your-api-keys","tags":["Python","API","Git/GitHub","Tutorial"],"redirects":["/blog/2017/01/26/hide-your-api-keys/"]},"fields":{"slug":"/blog/hide-your-api-keys/"}},"next":{"id":"092fae88-4745-5567-a600-bb4baf579ed4","frontmatter":{"title":"Image Types: Pixel vs. Vector","category":["visual"],"date":"2016-11-27T14:28:02.293Z","slug":"image-types-pixel-vs-vector","tags":["Design"],"redirects":null},"fields":{"slug":"/blog/image-types-pixel-vs-vector/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}