Description

I had add an icon font to a slider today. I use Awesome Font and I love it. Thought I would share it because it was making me upset for awhile. [css] // font stack $FontAwesome: 'FontAwesome'; // colors $orange: #ff6600; @font-face { font-family: "FontAwesome"; src: url('fontawesome-webfont.eot'); src: url('fontawesome-webfont.eot?#iefix') format('eot'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf') format('truetype'), url('fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; } .flexslider { .flex-direction-nav a { display: block; } &:hover { .next { opacity: 1; right: 10px; } .prev { opacity: 1; left: 10px; } } .next { font-size: 1px; &:before { display: inline-block; font-family: $FontAwesome; content:"\f054"; color: $orange; font-size: 30px; padding-left: 10px; } } .prev { font-size: 1px; &:before { display: inline-block; font-family: $FontAwesome; content:"\f053"; color: $orange; font-size: 30px; padding-left: 10px; } } .flex-direction-nav a { width: 30px; height: 30px; overflow: hidden; margin: 0; display: block; background: none; position: absolute; top: 90%; z-index: 10; cursor: pointer; text-indent: inherit; opacity: 1; -webkit-transition: all .3s ease; } } [/css]

Save 15% on iStock using the promo code


VECTORHQ16 apply promocode