0

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?

Jonathan
  • 697
  • 3
  • 13
  • 24

1 Answers1

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;
Mike Causer
  • 8,196
  • 2
  • 43
  • 63
  • Thank you, seems to work! Although always adding the fixed width might not be the most pleasant solution when doing responsive design (in my case I wanted to use Fittext.js), this might be the best solution if other svg-->font converters won't do a better job. – Jonathan Dec 08 '13 at 01:29