article:
Website: Life - HTML5 Theme for Social Organization (HTML5, CSS3, JS, PSD)
article:
Elements Design: Social Media Vector Icons Squared and Rounded (PSD)

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

Advertisement

Typography has always been an important part of good design, branding, and readability and web fonts offer many additional benefits: the text is selectable, searchable, zoomable, and high-DPI friendly. - Optimizing Web Font Rendering Performance

All these years, websites are restricted to typical fonts such as Arial, Georgia, Times and so on. This is due to the limitations of browsers, which at one time, were only able to deliver fonts from the user’s machine. Fortunately today, the web evolves fast and today’s browsers are supporting webfont embedding. - Free Web Font Services – Compared

Webfonts are a font format with a specific license that permits web designers and developers to use real typography online without losing the advantages of live text — dynamic, searchable, accessible content. - What are webfonts?

There are four primary levers that determine the performance impact of web fonts on the page: - Optimizing Web Font Rendering Performance

  • The total number of fonts and font-weights used on the page.
  • The total byte size of fonts used on the page.
  • The transfer latency of the font resource.
  • The time when the font downloads are initiated.
This is a complete set of 140 thin stroke icons inspired by iOS 7. A series of iOS 7 inspired vector icons in a custom @font-face icon font that can be styled dynamically using CSS. Those retina ready icons have a very modern style that will beautifully complement any project. - Stroke 7 Icon Font Set

Implementation


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

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


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

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



3. Place the icons in your HTML
    place your icon inline using a html tag such as <span> or <i>

    <span>

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

    <i>

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


Preview


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


Features

  • Scalable vector;
  • Versatility with CSS;
  • Screen Readers compatible;
  • Create your own;

Enjoy this freebie and want to show support? Spread the word.

Download, share and enjoy!




download
demo
source

Advertisement
Tags: stroke 7 icon webfont set, ios, webfonts, typography, scalable vector, versatility with css, screen readers compatible, retina, hdpi, dpi, span, i, css3, font face, webfont embedding, typography online, dynamic, searchable, accessible, web designers, web developers

Leave a Comment

No Comment

© Creative3x Ltd.