How to use Fontello custom icon as a logo for a website? How to make the character sizes correct?

Question

The original problem is, that I need a logo to which I can apply a shadow (text-shadow), and make it work in retina displays also. Png's with shadow made with photoshop don't really work if they have to support retina and non-retina -displays.

How would you write the html if you would use for example

    <h1 id="logo"><a href="#home"?>"><i class="icon-logo-font"></i>What to put here?</a></h1>

I'd like search engines etc. to know what it says. With images you can use the alt-tag. What would you do here?

Answer 1

Using your Fontello example, try adding the following css to the <i>:

display: inline-block;
width: 220px;
text-align: left;
text-shadow: 2px 2px 2px #f00;