Using CSS font icons and gradients.
A Pen by Tomomi Imura (@girlie_mac) on CodePen.
| <h1>Wow. So trendy. Such Flat Design Long-Shadow Font Icons.</h1> | |
| <ul> | |
| <li class="icon fontawesome-globe"></li> | |
| <li class="icon fontawesome-cog"></li> | |
| <li class="icon fontawesome-time"></li> | |
| <li class="icon fontawesome-github"></li> | |
| <li class="icon fontawesome-pinterest"></li> | |
| </ul> |
| @import url(http://weloveiconfonts.com/api/?family=fontawesome); | |
| body { | |
| font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| color: #666; | |
| } | |
| h1, h2 { | |
| font-weight: normal; | |
| } | |
| li { | |
| list-style-type: none; | |
| } | |
| [class*="fontawesome-"]:before { | |
| font-family: 'FontAwesome', sans-serif; | |
| } | |
| .icon, .icon::after { | |
| border-radius: 20px; | |
| } | |
| .icon { | |
| position: relative; | |
| width: 100px; | |
| height: 100px; | |
| background-color: #666; | |
| color: #fff; | |
| font-size: 74px; | |
| line-height: 100px; | |
| text-align: center; | |
| z-index: 1; | |
| margin: .25em; | |
| display: inline-block; | |
| } | |
| .icon::after { | |
| content: ""; | |
| display: block; | |
| width: 74px; | |
| height: 74px; | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| background-image: linear-gradient(35deg, | |
| transparent 20%, rgba(0,0,0,.2) 20%, rgba(0,0,0,.2) 85%, | |
| transparent 85%); | |
| z-index: -1; | |
| } | |
| .fontawesome-cog { | |
| background-color: #2baae0; | |
| } | |
| .fontawesome-github { | |
| background-color: #666; | |
| } | |
| .fontawesome-pinterest { | |
| background-color: #C92228; | |
| } | |
| .fontawesome-globe { | |
| background-color: #3b5998; | |
| } | |
| .fontawesome-time { | |
| background-color: hotpink; | |
| } |
Using CSS font icons and gradients.
A Pen by Tomomi Imura (@girlie_mac) on CodePen.