hello all

 

i was wondering lately i am seeing sites with icon-layout for example and it has a image but when looking at code there is no image linked,

 

can anyone point me in direction so i can look into it.

 

thanks

Possibly an icon font. Try the site icomoon, and google 'icon font CSS tricks'. Think Chris coyier has done a video screencast on it.

I just started using the Icomoon App recently, and its fantastic. I have always hated images for icons... all that cutting out, cropping, resizing, or if using a sprite the positioning and maths etc. Then the designer says its the wrong size or colour so change it. Arrgghhh!!!

 

So I discovered Icomoon and its brill... it generates icons using font, and there are thousands of icons to choose from. Because its a font you can easily resize and change colour. Its so much easier and quicker to insert icons as Icomoon fonts than processing images.

 

Then of course for optimisation you only get one font file downloaded as opposed to lots of little images (unless you use a sprite).

Oh also... you can do a bit more than just insert the font, so for example, for Twitter, Facebook etc. icons we wanted them on a white circle. So circular icons. Well, using border-radius: 50%, and background: #ffffff, we can put the Icomoon icon on a circle background, no need for background images either.

Another added bonus with icon fonts is that they are vector based so on retina displays or anything else that has increased pixel density will look much sharper than a pixel based image.

The other thing is that they download much faster than images along with fewer http requests to the server (if you're not using an image sprite)

how do i implement this as tried it and keep getting little boxes.

In icomoon go to the app page http://icomoon.io/app/, choose the icons, click Font at the bottom, then click Download at the bottom and you should get a Zip file. Unzip this and upload the files in the fonts folder to a location in your website.

 

This is how I do it, using CSS (changing the path to your own fonts folder):

 

.icomoon
{
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

    .icomoon.heart:before
    {
        content: "\e000";
        color: red;
        vertical-align: top;
    }

Then the HTML:

 

<a href="#" class="icomoon heart"></a>

This can be a p, div, span whatever, I just wanted to hyperlink my icon hence the a tag.

 

See the content: "\e000"; line in the CSS? The e000 part is what icomoon gives you on the Font page.

Also, little tip.... even if you create an account on icomoon, you cant Save the font selection per customer. It remebers your last session, so if you use this on many websites, you will soon want to add more font to an older site and you have to start again, and may end up with different values. Its VITAL you select the same font and have the same values if downloading it again. So to avoid this they have a Save Session function Bottom right of the page is a Database icon, click it and you will have Save Session and Load Session. Save the Session for your font selections, and it downloads a session file. So in the future, if you want to load this session again to add more fonts, you can just Load Session and choose this file and it resumes where you left off. I save the session file with the fonts on my customers websites.

Alternatively you can re-upload the downloaded fonts too, but I prefer the session.

As rbrtsmith states, they are vector based, so one of best advantages of these is you can change colour and size at will in the CSS without changing images. I have changed the sizes and colours so many times to get it right, oh what a nightmare if it was an actual image!

I dont think I will ever go back to icon images or sprites. I have informed my designer they must take icons from this site.

Another added bonus with icon fonts is that they are vector based so on retina displays or anything else that has increased pixel density will look much sharper than a pixel based image.

The other thing is that they download much faster than images along with fewer http requests to the server (if you're not using an image sprite)

Humm. Its very nice and helpful. Easy to navigate.

Just thought I would suggest you have a look at this icon system: http://fortawesome.github.io/Font-Awesome/

Unsure if this is exactly what you are looking for but either way they are good

Saw that one but didnt use it because looks like you download ALL fonts. Can't see how to select the few I need. So it's unnecessary file size, most unused font. No page speed optimisation taken into account. The fact it's designed for Twitter Bootstrap which has over 5000 lines of CSS so most of it wasted, also tells me they don't think about page speed optimisation which is important.