Camen Design Forum

Icons on CamenDesign

append delete NickPfen

Kroc,
What was the process you used for the icons on your site - the icons that show upon hover and the icons (jpg, png, CC logo) in the sidebar?

Did you download png files? Then encode to base 64 and add to style sheet? Are they @font-face?

Thanks!

Reply RSS

Replies

append delete #1. Kroc

It’s a collection of techniques. The CC logo is a font (which is bad way of doing it, but I was treading new ground for myself). All other icons are images and the smaller ones are base-64 encoded into the CSS after having been optimised to death; see http://camendesign.com/website_optimisation_measures

append delete #2. NickPfen

@Kroc,
How would you do the CC logo today? Would you not use icon fonts, as suggested in this post: http://www.studiopress.com/design/retina-display-design.htm

append delete #3. Kroc

SVG. It wasn’t a possibility at the time I was designing the site, otherwise I would have.

append delete #4. NickPfen

Thanks Kroc! What method would you use to embed svg for your CC logo and other elements? Object element, css, @font-face, etc? If you have information resources to learn "how," that would be awesome.

Maybe an article about svg over at camendesign is in need :)

append delete #5. Kroc

CSS, you can use SVG files as you would any other image in modern browsers; there's even work going on to allow you to fit multiple images in a single SVG file and then pick the one you want to view with the internal SVG ID, e.g. `background-image: url("images.svg#cat");`

Right now I'm not very well and can't dig up any resources for you, but you can search for "SVG sprites" to find out more about this technique.

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, theraje, Martijn