Learn and share. The simplest harmony.

 

Using Pictogram Webfont for Replacing Image

Posted on March 9, 2012 and got 6 shouts so far

Saving HTTP Request is one of many concern for webpage performances, using image sprites is one of them but how about if we have a font collection that can replace these image sprites? In this post we’re going to utilize pictogram webfont for replacing image that usually we use. We’ll utilizing this pictogram on many item including button, badge, headline text, form input, unordered list and navigation.

Using Webfont

Using webfont on our webpage can be done using @font-face property. In this post we’ll using Entypo, a free OpenType font that contains 100+ pictogram made by Daniel Bruce. Following css will create font-family named EntypoRegular.

@font-face {
    font-family: 'EntypoRegular';
    src: url('font/entypo-webfont.eot');
    src: url('font/entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/entypo-webfont.woff') format('woff'),
         url('font/entypo-webfont.ttf') format('truetype'),
         url('font/entypo-webfont.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

To use the font, we can call them by typing each representative character. On this example we’ll use span element that will generate pictogram images using :after selector, and content property it will contains the pictogram character we want to use.


.pictogram {
	font-family: 'EntypoRegular';
	font-size: 20px;
}

.refresh:after { content: "h"; font-size: 38px; }


Creating Button

First item we will to create is button, using anchor and div elements, pictogram’s span will be inserted inside them. Some CSS properties we’ll use for styling them are transition, linear-gradient, box-shadow and text-shadow.


  Refresh 


  Buy me a cup of tea  


Add me to your circle on
Google Plus
.button {
	color: #fff;
	border-radius: 3px;
	font-weight: bold;
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
	box-shadow: inset rgba(255,255,255,0.3) 0 2px 0;
	transition: 0.1s linear;
	background: linear-gradient(to bottom,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
}
	
	.refresh:after { content: "h"; font-size: 38px; }
	.tea:after { content: "u"; font-size: 38px; }
	.circles:after { content: "L"; font-size: 98px; vertical-align: middle; }

Here’s the expected result :


Creating Badge

Next item is badge, this badge is a circle badge with grey border and strong gradient blue to purple backround, the pictogram will be positioned in the middle.

  
  
  
  
  
.rss:after { content: "S"; font-size: 70px; position: absolute; margin: .33em .28em; }
.cloud:after { content: "y"; font-size: 70px; position: absolute; margin: .32em .2em; }
.download:after { content: "w"; font-size: 70px; position: absolute; margin: .3em .27em; }
.trash:after { content: "I"; font-size: 70px; position: absolute; margin: .35em .24em; }
.rack:after { content: "t"; font-size: 70px; position: absolute; margin: .35em .22em; }

And the badge will be like following image :


Creating Headline

Headline text is useful to promote our feature in some short words. Here’s the headline we want to make :

The font for the text we’ll use League Gothic webfont, so we need to create the font-family using @font-face like we do before.

Simple Settings for Content Management
@font-face {
    font-family: 'LeagueGothic';
    src: url('font/league_gothic-webfont.eot');
    src: url('font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/league_gothic-webfont.woff') format('woff'),
         url('font/league_gothic-webfont.ttf') format('truetype'),
         url('font/league_gothic-webfont.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.headline {
	margin: 1em .5em;
	display: inline-block;
	width: 350px;
	font-size: 30px;
	font-family: 'LeagueGothic';
}

	.headline span {
		display: inline-block;
		width: 100px;
		vertical-align: top;
	}
	
	.headline span.text-headline {
		width: 200px !important;
		text-transform: uppercase;
	}
	
	.headline .pictogram {
		margin-top: .5em !important;
	}

.setting:after {	content: "@"; font-size: 150px; display: inline-block; }


Form Input

The pictogram on form input will be positioned before the input placeholder, by using this webfont we can replace image background like we usually do. Here’s the result we want to make :

The pictogram’s span also defined before the input, so the span will have absolute position to make it properly positioned.


.email:after {	content: "%"; font-size: 50px; position: absolute; color: #1a3d51; margin: .6em .8em; }


Unordered List

We also can replace default list-style-type value or the image we usually use to replace default list-style-type value.

.folder:after { content: "s"; font-size: 30px; color: #81a9c5; }
.tag:after { content: "C"; font-size: 30px; }
.lock:after { content: "U"; font-size: 30px; }
.unlock:after { content: "V"; font-size: 30px; }
.mic:after { content: "O"; font-size: 30px; }
.love:after { content: "6"; font-size: 30px; color: #ff82ac; }
.star:after { content: "7"; font-size: 30px; color: #ffb700;}
.like:after { content: "8"; font-size: 30px; color: #3b5998; }
.phone:after { content: "!"; font-size: 30px; color: #f45232;}
.flag:after { content: "?"; font-size: 30px; }
.adduser:after { content: "-"; font-size: 30px; }
.attach:after { content: "'"; font-size: 30px; }
.edit:after { content: "&"; font-size: 30px; }

Expected result :


Navigation

Simple navigation we want to make we’ll be formed by pictogram and navigation title, pictogram will be positioned upper the title and the unordered list element we’ll use to form them.


.upload:after { content: "v"; font-size: 60px; color: #806d79; text-shadow: rgba(255,255,255,0.5) 1px 1px 1px; }
.storage:after { content: "x"; font-size: 60px; color: #806d79; text-shadow: rgba(255,255,255,0.5) 1px 1px 1px; }
.photo:after { content: "D"; font-size: 60px; color: #806d79; text-shadow: rgba(255,255,255,0.5) 1px 1px 1px; }
.help:after { content: "K"; font-size: 60px; color: #806d79; text-shadow: rgba(255,255,255,0.5) 1px 1px 1px; }
.print:after { content: "<"; font-size: 60px; color: #806d79; text-shadow: rgba(255,255,255,0.5) 1px 1px 1px; }
.gadget:after { content: '"'; font-size: 60px; color: #806d79; text-shadow: rgba(255,255,255,0.5) 1px 1px 1px; }

Here's the expected result :


We're Done

The more we have pictogram webfont collection the more images will be replaced, Enjoy!

 

This Post Tags :

Bookmark Post :

Pin It