Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Icons in css-file?

Reply
Thread Tools

Icons in css-file?

 
 
Johannes Reese
Guest
Posts: n/a
 
      03-08-2005
Is it possible to give information about an *.ico-file to include in a
*.css-file?

Regards,

Jan
 
Reply With Quote
 
 
 
 
SpaceGirl
Guest
Posts: n/a
 
      03-08-2005
Johannes Reese wrote:
> Is it possible to give information about an *.ico-file to include in a
> *.css-file?
>
> Regards,
>
> Jan


The only place you can use .ico files on a web page are for the bookmark
icon. The way you link these is through HTML, not CSS:

<link rel="shortcut icon" href="images/vopen.ico" />
 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      03-08-2005
On Tue, 08 Mar 2005 16:29:31 +0100 Johannes Reese wrote:

> Is it possible to give information about an *.ico-file to include in a
> *.css-file?
>
> Regards,
>
> Jan



No.
You'd have to reference the image in a division or an <a> tag with an ID or
class.

#icon { ..... }

<div id="icon">icon.ico</div>



 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      03-08-2005
SpaceGirl <> wrote:
>Johannes Reese wrote:
>> Is it possible to give information about an *.ico-file to include in a
>> *.css-file?


As SpaceGirl says you can't use CSS to include your site shortcut
icon. But if you want to use .ico files elsewhere then you can, though
many of the more logical uses of such files (where an icon would be
useful) would involve CSS that is poorly supported at present.

>The only place you can use .ico files on a web page are for the bookmark
>icon. The way you link these is through HTML, not CSS:
>
><link rel="shortcut icon" href="images/vopen.ico" />


Actually, <img src="favicon.ico"> works in IE5+, Opera and Firefox, so
I would guess that specifying .ico files for backgrounds via HTML or
CSS would also work. Possibly more usefully they also work in the
list-style-image and content properties.

I don't see any reason why an ICO would be preferable to a GIF or PNG
for that sort of small icon, but I don't see many reasons why the
opposite would be true either (GIF animation and PNG alpha
transparency being the obvious ones).

Going a bit theoretical, if you had a lot of links to a particular
external site than you could do something like this:

a[href|="http://www.yahoo.com/"]:before {content:
url('http://www.yahoo.com/favicon.ico')}

Gecko only at the moment, IE doesn't support any of the above and
Opera seems a little buggy.

(It's a shame that the value of attr() isn't parsed by the CSS parser
because then you could do a more generic version such as
a[href|="http"]:before {content: url(attr(href) '/favicon.ico')}
But that won't work under CSS2.x rules.)

Steve


--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      03-08-2005
It was somewhere outside Barstow when "Richard" <Anonymous@127.001>
wrote:

>You'd have to reference the image in a division or an <a> tag with an ID or
>class.


As usual, RtS spouts irrelevant rubbish.
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      03-09-2005
Steve Pugh wrote:

> a[href|="http://www.yahoo.com/"]:before {content:
> url('http://www.yahoo.com/favicon.ico')}
>
> Gecko only at the moment, IE doesn't support any of the above and
> Opera seems a little buggy.


a[href|="http://www.yahoo.com/"]:before {
background: transparent url('http://www.yahoo.com/favicon.ico')
no-repeat scroll center left;
padding-left: 32px;
}

Works nicely in Gecko and Opera.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
SpaceGirl
Guest
Posts: n/a
 
      03-09-2005
Richard wrote:
> On Tue, 08 Mar 2005 16:29:31 +0100 Johannes Reese wrote:
>
>
>>Is it possible to give information about an *.ico-file to include in a
>>*.css-file?
>>
>>Regards,
>>
>>Jan

>
>
>
> No.
> You'd have to reference the image in a division or an <a> tag with an ID or
> class.
>
> #icon { ..... }
>
> <div id="icon">icon.ico</div>
>
>
>


Hmm... care to explain how that works? All that your example would do is
print the text "icon.ico" on the web page. Nothing else. You can however
do something along those lines for other image types:

<style ...>

#icon { background:url(myimage.gif);

</style>

....

<div id="icon">the background of this text is an image</div>


Browsers really only support jpeg, gif and png images. ico files have
limited support for bookmarking etc, and even then they dont work all
the time (IE only displays them AFTER you have bookmarked a page). You
couldn't use a .ico file in my example.
 
Reply With Quote
 
SpaceGirl
Guest
Posts: n/a
 
      03-09-2005
Toby Inkster wrote:
> Steve Pugh wrote:
>
>
>>a[href|="http://www.yahoo.com/"]:before {content:
>>url('http://www.yahoo.com/favicon.ico')}
>>
>>Gecko only at the moment, IE doesn't support any of the above and
>>Opera seems a little buggy.

>
>
> a[href|="http://www.yahoo.com/"]:before {
> background: transparent url('http://www.yahoo.com/favicon.ico')
> no-repeat scroll center left;
> padding-left: 32px;
> }
>
> Works nicely in Gecko and Opera.
>


Dont you just LOVE IE?
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      03-09-2005
SpaceGirl <> wrote:

><style ...>
>#icon { background:url(myimage.gif);
></style>
>
><div id="icon">the background of this text is an image</div>
>
>Browsers really only support jpeg, gif and png images. ico files have
>limited support for bookmarking etc, and even then they dont work all
>the time (IE only displays them AFTER you have bookmarked a page). You
>couldn't use a .ico file in my example.


Yes you could. Try it. It works.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>
 
Reply With Quote
 
SpaceGirl
Guest
Posts: n/a
 
      03-09-2005
Steve Pugh wrote:
> SpaceGirl <> wrote:
>
>
>><style ...>
>>#icon { background:url(myimage.gif);
>></style>
>>
>><div id="icon">the background of this text is an image</div>
>>
>>Browsers really only support jpeg, gif and png images. ico files have
>>limited support for bookmarking etc, and even then they dont work all
>>the time (IE only displays them AFTER you have bookmarked a page). You
>>couldn't use a .ico file in my example.

>
>
> Yes you could. Try it. It works.
>
> Steve
>


I missed a caveat "and have it work in IE"
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
show desktop icons missing under arrange icons by JoAnna Windows 64bit 15 03-10-2009 08:23 AM
Sometimes Explorer vanishes along with the icons, but the icons come back Desdemona@Verona.com Computer Support 1 12-06-2007 03:17 AM
JTree and those small Icons ahead folder, file etc icons. Richie Williams Java 5 10-25-2007 05:01 PM
Mozilla Icons Alan P Firefox 5 12-08-2003 01:34 AM
icons DABlake Firefox 0 11-17-2003 02:48 PM



Advertisments