Change minimal Nav arrows to icon fonts?

shorn's Avatar

shorn

22 Nov, 2012 05:20 PM

Based on it's "touch" ability, this slider is great for use on touchscreen devices, but I am looking at making it complete by making the nav buttons retina ready.

AI have made an edit to the css so that I've got the arrow boxes, but I need to get the arrows in there.

I'm using awesome font to render icons, and wondered if anyone could give me a pointer in how to get an icon in there!
Effectively it should be the same as changing the current arrow image to text, so if anyone has ideas, i'd love to know! Thanks!

  1. 1 Posted by kyrcman on 22 Nov, 2012 05:52 PM

    kyrcman's Avatar

    Thats an easy one if I'm not misstaken.

    http://www.w3schools.com/cssref/sel_before.asp

    p:before
    { 
        content:"Read this -";
        background-color:yellow;
        color:red;
        font-weight:bold;
    }
    

    You will probably want to position it also:

    p {position: relative;}
    p:before {content:"text"; display: block;  position: absolute;}
    

    ... and whatever css you want to use.

  2. 2 Posted by shorn on 22 Nov, 2012 06:17 PM

    shorn's Avatar

    Hmmm, thanks for that, however I'm still not sure how to get the "p" element into the markup. The navigation elements are produced via js. I see what your getting at, but I'm still a tad unclear on how to achieve it!

  3. 3 Posted by kyrcman on 22 Nov, 2012 06:33 PM

    kyrcman's Avatar

    You can put the :before on a, div, span or whatever you have to work with.

    <a class="button_class"></a> <--- You want text in this
    
    a.button_class {width: 20px; height: 20px; display: block; position: relative} 
    a.button_class:after {content: "S"; width: 20px; height: 20px; display: block; position: absolute;}
    

    The :after (or :before) creates a psydo element with an "S" in it that you may style and position like a span or similar.

    edit: lots of edits

  4. 4 Posted by shorn on 23 Nov, 2012 01:58 PM

    shorn's Avatar

    Hmm, typed out a long response but looked like it never was sent!

    Anyhow, Thanks for that, was still unable to get it to work, but for now, I have removed the arrows altogether, and I am just going with the bullets.

    Thanks though!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Screen_Shot_2012-11-22_at_17.17.29.png 89.7 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac