article:
UI: Red Flat UI Kit (AI)
article:
Website: Life - HTML5 Theme for Social Organization (HTML5, CSS3, JS, PSD)

Typography & Code: Filled 7 Icon WebFont Set (EOT. SVG, TTF, WOFF)

Advertisement

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. - Web typography

A font provides a resource containing the visual representation of characters. At the simplest level it contains information that maps character codes to shapes (called glyphs) that represent these characters. Fonts sharing a common design style are commonly grouped into font families classified by a set of standard font properties. - CSS Fonts Module Level 3

With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts. In the new @font-face rule you must first define a name for the font, and then point to the font file. - CSS3 @font-face Rule

From Using @font-face - This is the method with the deepest support possible right now:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


and then use it like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}


In this article we present a custom @font-face icon font with scalable vector icons.

This freebie is a complete set of 135 filled icons inspired by iOS 7. Those retina ready icons have a very modern style that will beautifully complement any project. - Filled 7 Icon Font Set


Implementation



- Copy the entire pe-icon-7-filled directory into your project.


- In the <head> of your html, reference the location to our icon font CSS: pe-icon-7-filled.css and if needed helper CSS: helper.css.

<link rel="stylesheet" href="path/to/pe-icon-7-filled/css/pe-icon-7-filled.css">

<!-- Optional - Adds useful class to manipulate icon font display -->
<link rel="stylesheet" href="path/to/pe-icon-7-filled/css/helper.css">



- Place the icons in your HTML

<span class="pe-7f-map-marker"></span> pe-7f-map-marker

<i class="pe-7f-home"></i> pe-7f-home


Preview


Resource Fonts: Filled 7 Icon WebFont Set (EOT. SVG, TTF, WOFF)


Features


  • Scalable vector.
  • Versatility with CSS.
  • Screen Readers compatible.


We would appreciate it if you credit our resources and help us to spread our work and name.

Enjoy Downloading this freebie!




download
demo
source

Advertisement
Tags: fonts, webfonts, filled 7 icon webfont set, eot. svg, ttf, woff, scalable vector, css3, font face, stylesheet, html5

Leave a Comment

No Comment

© Creative3x Ltd.