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; vr; web-share","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"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjg2NDEyMzgyLCJpYXQiOjE2ODY0MDg3ODIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.GV30lBXU1y7-C8PnJIWfL96d0KlZuDELNRRwpBTRyDN9xP8g_1EVw6cqH7kyDZtg0YRV3ldmoFd4qIE4k8LBqiopx6XrjSSiV8lAquFHmdRVPa1qd6yazAJkGOzN2_f6jmNwVcq6h4a4Uc_29bHDYg2arCFQMseTk3YA9s7DrFGYXho1GR6F8B2mzCxEP6MCK3sWT7Lw8H25O7GXaXU2rPzxeGYbpKmoCwfgn9su1aKSzB6UuNoeYBIefWxqs6uQeUoHpHB9j7kCd4808ioD5NtLkpiQldqh9lJT754qwtBJQiaZOxO3xbNPDEH4sobs3SRJVDnEgFV9RAhXKZSPzA"},"__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}\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2016-11-23T17:29:22.000Z\",\"updated_at\":\"2016-11-28T14:12:49.000Z\",\"title\":\"Adding Icon Fonts With CSS Only\",\"description\":\"\",\"slug_hash\":\"vymPQo\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"e3265d31b1ce133cbc1768d1dd21afd7\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0158923c-1950-7443-bee4-1636fb322f0c\",\"is_new_editor_pen\":false,\"pen_hash\":null,\"hashid\":\"vymPQo\"}"}