Icons in css-file?

Discussion in 'HTML' started by Johannes Reese, Mar 8, 2005.

  1. Is it possible to give information about an *.ico-file to include in a
    *.css-file?

    Regards,

    Jan
    Johannes Reese, Mar 8, 2005
    #1
    1. Advertising

  2. Johannes Reese

    SpaceGirl Guest

    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" />
    SpaceGirl, Mar 8, 2005
    #2
    1. Advertising

  3. Johannes Reese

    Richard Guest

    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>
    Richard, Mar 8, 2005
    #3
  4. Johannes Reese

    Steve Pugh Guest

    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/>
    Steve Pugh, Mar 8, 2005
    #4
  5. Johannes Reese

    Andy Dingley Guest

    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.
    Andy Dingley, Mar 8, 2005
    #5
  6. Johannes Reese

    Toby Inkster Guest

    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
    Toby Inkster, Mar 9, 2005
    #6
  7. Johannes Reese

    SpaceGirl Guest

    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.
    SpaceGirl, Mar 9, 2005
    #7
  8. Johannes Reese

    SpaceGirl Guest

    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? :)
    SpaceGirl, Mar 9, 2005
    #8
  9. Johannes Reese

    Steve Pugh Guest

    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/>
    Steve Pugh, Mar 9, 2005
    #9
  10. Johannes Reese

    SpaceGirl Guest

    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" :)
    SpaceGirl, Mar 9, 2005
    #10
  11. Johannes Reese

    Steve Pugh Guest

    SpaceGirl <> wrote:
    >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.


    >I missed a caveat "and have it work in IE" :)


    It will work for some ICO files but not others in IE.
    #icon { background:url(http://www.yahoo.com/favicon.ico);} works but
    #icon { background:url(http://www.ebay.com/favicon.ico);} doesn't.

    Typical.

    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/>
    Steve Pugh, Mar 9, 2005
    #11
  12. Johannes Reese

    SpaceGirl Guest

    Steve Pugh wrote:
    > SpaceGirl <> wrote:
    >
    >>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.

    >
    >
    >>I missed a caveat "and have it work in IE" :)

    >
    >
    > It will work for some ICO files but not others in IE.
    > #icon { background:url(http://www.yahoo.com/favicon.ico);} works but
    > #icon { background:url(http://www.ebay.com/favicon.ico);} doesn't.
    >
    > Typical.
    >
    > Steve
    >


    Yeah... I tried it on two of the icons we use on our sites as well...
    didn't work on either. Maybe it's something to do with colour depth or
    something.
    SpaceGirl, Mar 9, 2005
    #12
  13. 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 am not sure if I was really understood. What I meant was the element that
    appears to the left of the address in the browser. It is to be introduced
    like this.

    <link rel="shortcut icon" href="some_picture.ico">

    I didn't want to introduce this line to any document in a directory, so I
    thought of putting it in a css-file.

    Jan
    Johannes Reese, Mar 9, 2005
    #13
  14. Johannes Reese

    Steve Pugh Guest

    Johannes Reese <> wrote:

    >I am not sure if I was really understood. What I meant was the element that
    >appears to the left of the address in the browser. It is to be introduced
    >like this.
    >
    ><link rel="shortcut icon" href="some_picture.ico">


    No we understood (well except Richard, but he's an idiot so ignore
    him). Look at the earliest replies and you'll see that very issue
    addressed. Things evolved a bit from there.

    >I didn't want to introduce this line to any document in a directory, so I
    >thought of putting it in a css-file.


    Nope. Can't be done with CSS2.x. I think it may be on the cards for
    CSS3 but that's no use at the moment.
    If you call the file favicon.ico and place it in the root directory
    then some browsers will use it without there needing to be any link to
    it from the HTML.

    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/>
    Steve Pugh, Mar 9, 2005
    #14
  15. Johannes Reese

    JDS Guest

    On Tue, 08 Mar 2005 23:29:20 +0000, Andy Dingley wrote:

    > As usual, RtS spouts irrelevant rubbish.


    It's like he's answering a question for another thread or something!

    OP: How do you build a birdhouse?
    RtS: The square root can be determined by putting the topsoil down after
    the sand, then coat with varnish.

    Huh???

    --
    JDS | lid
    | http://www.newtnotes.com
    DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/
    JDS, Mar 9, 2005
    #15
  16. Johannes Reese

    Toby Inkster Guest

    SpaceGirl wrote:

    > Browsers really only support jpeg, gif and png images.


    Nonsense. XBM is supported by nearly all browsers. Has been for years and
    years.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 9, 2005
    #16
  17. Johannes Reese

    SpaceGirl Guest

    Toby Inkster wrote:
    > SpaceGirl wrote:
    >
    >
    >>Browsers really only support jpeg, gif and png images.

    >
    >
    > Nonsense. XBM is supported by nearly all browsers. Has been for years and
    > years.
    >


    :) Not really a common or relevant format, whatever it is... nit picker!
    SpaceGirl, Mar 10, 2005
    #17
  18. Johannes Reese

    Toby Inkster Guest

    SpaceGirl wrote:

    > :) Not really a common or relevant format,


    XBM is actually a very useful format as far as server-side scripting is
    concerned.

    It is incredibly easy to manipulate using Perl or PHP without even loading
    any image modules like ImageMagick or GD, and supported by virtually all
    graphical browsers.

    > whatever it is...


    XBM = X11 BitMap. Basically the UNIX equivalent of BMP, but it's
    restricted to monoschrome. (There is a colour version of XBM, XPM, but
    it's less well supported in browsers.)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 10, 2005
    #18
  19. Johannes Reese

    Steve Pugh Guest

    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. ;-)


    Only realised today that whilst these work in experiments we've been
    using the wrong selector. a[href|=foo] selects only href="foo" or
    href="foo-bar" it doesn't select href="foo/bar" which is what was
    really wanted. The selector should have been a[href^=foo] which
    selects any value of href that starts with foo. But that selector is
    CSS3 and doesn't seem to be supported by Opera at all.

    Also, in your example above is the :before needed? I can see that
    without it we end up with problems when the link wraps onto a second
    line but with it I seem to get other problems (understatement - it
    stops working in Firefox).

    Anyway, implemented a version of this on my blog.
    http://www.stevepugh.net/VTT/?p=177

    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/>
    Steve Pugh, Mar 13, 2005
    #19
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. nick
    Replies:
    1
    Views:
    669
  2. tom watson

    icons for valid css and html

    tom watson, Sep 16, 2003, in forum: HTML
    Replies:
    13
    Views:
    5,920
    Jukka K. Korpela
    Sep 17, 2003
  3. Luigi Donatello Asero
    Replies:
    49
    Views:
    3,549
    Luigi Donatello Asero
    Jan 4, 2005
  4. Luigi Donatello Asero
    Replies:
    18
    Views:
    722
    Luigi Donatello Asero
    Jan 5, 2005
  5. Richie Williams
    Replies:
    5
    Views:
    1,495
    Richie Williams
    Oct 25, 2007
Loading...

Share This Page