Adding Icon Fonts With CSS Only Live Preview

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__cpedata":{"action":"show","controller":"live_fullpage"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjU2ODE4OTc3LCJpYXQiOjE2NTY4MTUzNzcsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.ept9otpDYgrPnsuk0x1Y0PYc4InTwHOCq-jZBZZdIpmgMSmmih3uQVxgLk74ztIvcPLBOW9uXTNh8HwsdjkivNpAB623jtOaYXR5y8Pw1n6o_Z3592RsIiMzb0w-YRgtnn8xN9vsggftaD93hucSFZ3v45Xed_2mUhG0D0gk5ZSQiRdyOJ_Uo3-rwlUcXZFE8rUqm1XOffBBykywpwP0xhrXv4twAIqlXKL5j8CclYb2SAVu6JjlKSkMk2mKm_8rSrtbnaoRHSAAHQmXmW1oMKACprUkRFBSQlyXAulY-J-FsFFZF4zC9x3Kzvp4DJ3qMEfnSufeQxiKmgYZ2vDIKg"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"User","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":11135882,\"user_id\":927610,\"html\":\"\\n<link rel=\\\"stylesheet\\\" href=\\\"https:\\/\\/maxcdn.bootstrapcdn.com\\/font-awesome\\/4.7.0\\/css\\/font-awesome.min.css\\\">\\n\\n<header>\\n<h1>Adding Icon Fonts With CSS<\\/h1>\\n      <a href=\\\"http:\\/\\/webdesignerwall.com\\/tutorials\\/how-to-add-icon-fonts-to-any-element-with-css\\\" alt=\\\"font awesome\\\" target=\\\"_blank\\\"><button id=\\\"fontawesome\\\">View Tutorial<\\/button><\\/a>\\n<\\/header>\\n<main class=\\\"content\\\" role=\\\"main\\\">\\n  <section id=\\\"no-icon\\\">\\n  <h2>Without Icon<\\/h2>\\n    \\n  <ul>\\n    <li><a href=\\\"#\\\">Home<\\/a><\\/li>\\n    <li><a href=\\\"#\\\">About<\\/a><\\/li>\\n    <li><a href=\\\"#\\\">Contact<\\/a><\\/li>\\n  <\\/ul>\\n\\n  <\\/section>\\n  \\n  <section id=\\\"icon-added\\\">\\n  <h2>Icon Added Before<\\/h2>\\n\\n  <ul>\\n    <li id=\\\"menu-link-1\\\"><a href=\\\"#\\\">Home<\\/a><\\/li>\\n    <li id=\\\"menu-link-2\\\"><a href=\\\"#\\\">About<\\/a><\\/li>\\n    <li id=\\\"menu-link-3\\\"><a href=\\\"#\\\">Contact<\\/a><\\/li>\\n  <\\/ul>\\n  <\\/section>\\n\\n  <section id=\\\"icon-replace\\\">\\n    <h2>Icon Replace Link Text<\\/h2>\\n     <ul>\\n      <li id=\\\"menu-link-4\\\"><a href=\\\"#\\\">Home<\\/a><\\/li>\\n      <li id=\\\"menu-link-5\\\"><a href=\\\"#\\\">About<\\/a><\\/li>\\n      <li id=\\\"menu-link-6\\\"><a href=\\\"#\\\">Contact<\\/a><\\/li>\\n      <li id=\\\"fontawesome-flag\\\"><a href=\\\"https:\\/\\/www.bootstrapcdn.com\\/fontawesome\\/\\\" alt=\\\"font awesome icons\\\" target=\\\"_blank\\\">Font Awesome<\\/a><\\/li>\\n    <\\/ul>\\n  <\\/section>\\n<\\/main>\\n<footer>\\n<p>A <a href=\\\"http:\\/\\/www.webdeisgnerwall.com\\\" alt=\\\"web designer wall\\\" target=\\\"_blank\\\">webdesignerwall.com<\\/a> Tutorial<\\/p>\\n<\\/footer>\\n\\n\",\"css\":\"\\/* icon-added icon styles *\\/\\n\\n#icon-added a::before{\\n\\tpadding-right: 10px;\\n  font-family: \\\"FontAwesome\\\"\\n}\\n#menu-link-1 a::before{\\n\\tcontent: \\\"\\\\f015\\\";\\n}\\n#menu-link-2 a::before{\\n\\tcontent: \\\"\\\\f2b9\\\";\\n}\\n#menu-link-3 a::before{\\n\\tcontent: \\\"\\\\f0e0\\\";\\n}\\n\\n\\n\\/* icon-replace icon styles *\\/\\n#icon-replace a{\\n\\tcolor: transparent;\\n  overflow: hidden;\\n  max-height: 40px;\\n  width: 16px;\\n}\\n#icon-replace a::before{\\n  color: #777;\\n  font-family: \\\"FontAwesome\\\";\\n  font-size: 1rem;\\n  transition: all ease-in-out .3s;\\n}\\n#icon-replace a:hover::before{\\n   color: #0CF;\\n}\\n#menu-link-4 a::before{\\n\\tcontent: \\\"\\\\f015\\\";\\n}\\n#menu-link-5 a::before{\\n\\tcontent: \\\"\\\\f2b9\\\";\\n}\\n#menu-link-6 a::before{\\n\\tcontent: \\\"\\\\f0e0\\\";\\n}\\n#fontawesome-flag{\\n\\tbackground-color: #1fa67a;\\n}\\n\\n#fontawesome-flag a::before{\\n   color: #FFF;\\n   content: \\\"\\\\f2b4\\\";\\n}\\n\\n@media (max-width: 667px) {\\n  h1, button{display: none;}\\n}\\n\\n\\/* MAIN CSS *\\/\\n\\nbody{\\n\\t\\/* Permalink - use to edit and share this gradient: http:\\/\\/colorzilla.com\\/gradient-editor\\/#ff5db1+0,ef017c+100;Pink+3D+%231 *\\/\\n\\tbackground: #ff5db1; \\/* Old browsers *\\/\\n\\tbackground: -moz-linear-gradient(top,  #ff5db1 0%, #ef017c 100%); \\/* FF3.6-15 *\\/\\n\\tbackground: -webkit-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); \\/* Chrome10-25,Safari5.1-6 *\\/\\n\\tbackground: linear-gradient(to bottom,  #ff5db1 0%,#ef017c 100%); \\/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *\\/\\n\\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); \\/* IE6-9 *\\/\\n\\tmargin: 0;\\n}\\na{\\n\\tcolor: #FFF;\\n\\tfont-family: sans-serif;\\n\\ttransition: all ease-in-out .3s;\\n\\t\\t\\n}\\na:hover{\\n  color: #0CF;\\n}\\n\\nheader{\\n\\ttext-align: center;\\n\\tmargin: 2% 0 0;\\n\\t\\n}\\nheader h1{\\n\\tfont-family: 'georgia', serif;\\n\\tfont-size: 3.2rem;\\n}\\nmain{\\n\\tdisplay: flex;\\n\\tflex-flow: column wrap;\\n\\tjustify-content: center;\\n\\talign-items: center;\\n\\theight: 100%;\\n\\tmargin-bottom: 10%;\\n}\\nsection{\\n\\ttext-align: center;\\n\\twidth: 100%;\\n\\tmargin: 1% 2% 1%;\\n\\tmax-width: 720px;\\n}\\nh1, h2{\\n\\tcolor: #FFF;\\n\\tfont-weight: bold;\\n\\tfont-size: 2rem;\\n}\\nbutton{\\n  border: 0px;\\n  border-radius: 5px;\\n  cursor: pointer;\\n  height: 40px;\\n  line-height: 40px;\\n  padding: 0 20px;\\n  text-transform: uppercase;\\n}\\nul{\\n\\tbackground: #FFF;\\n\\tborder-radius: 10px;\\n\\tdisplay: flex;\\n\\tflex-flow: row wrap;\\n\\tjustify-content: center;\\n\\theight: 40px;\\n\\t-webkit-box-shadow: 0px 1px 1px 1px rgba(189,96,189,1);\\n  -moz-box-shadow: 0px 1px 1px 1px rgba(189,96,189,1);\\n  box-shadow: 0px 1px 1px 1px rgba(189,96,189,1);\\n}\\nli{\\n\\tlist-style-type: none;\\n\\tpadding: 0 20px;\\n\\ttransition: all ease-in-out .3s;\\n}\\nli a{\\n  color: #777;\\n\\tdisplay: block;\\n\\tfont-size: .8rem;\\n  height: 100%;\\n  line-height: 40px;\\n\\ttext-transform: uppercase;\\n  text-decoration: none;\\n}\\nli:hover{\\n\\t-webkit-box-shadow: inset 0px 0px 48px 2px rgba(237,237,237,1);\\n\\t-moz-box-shadow: inset 0px 0px 48px 2px rgba(237,237,237,1);\\n\\tbox-shadow: inset 0px 0px 48px 2px rgba(237,237,237,1);\\n}\\nfooter p{\\n\\ttext-align: center;\\n\\tfont-size: .8rem;\\n\\tfont-weight: bold;\\n\\tcolor: #FFF;\\n}\\n#fontawesome{\\n\\tbackground-color: #1fa67a;\\n  color: #FFF;\\n}\\n#fontawesome::before{\\n  font-family: \\\"FontAwesome\\\";\\n\\tcontent: \\\"\\\\f2b4\\\";\\n  padding-right: 10px;\\n}\\n#tutorial{\\n  background-color: #59ced7;\\n  color: #FFF;\\n}\",\"parent\":0,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2016-11-23T17:29:22.000Z\",\"updated_at\":\"2016-11-28T14:12:49.000Z\",\"session_hash\":\"04fd69b41046dbb420571dc59bf5f5c5\",\"title\":\"Adding Icon Fonts With CSS Only\",\"description\":\"\",\"slug_hash\":\"vymPQo\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"e3265d31b1ce133cbc1768d1dd21afd7\",\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"4e367f01-e495-4266-bd0f-dd44a121199d\",\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":null,\"deleted_at\":null,\"deleted_by_user_id\":null,\"hard_delete_at\":null,\"pen_hash\":null,\"hashid\":\"vymPQo\"}"}