Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Appending A Data-Icon To An External Link With CSS3

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #40533
    GAtkins
    Member

    Is there a way to append a data icon to an external link using CSS3? What would the syntax be for the content line.

    In the code below the “21D7” is a 45deg right, upward pointing arrow, but I want to use a data icon.

    Is this possible?

    Thanks in advance for any help or ideas.

    Glenn

    .footerdivleft a[href^=”http://”%5D:after, .footerdivmiddle a[href^=”http://”%5D:after, .footerdivright a[href^=”http://”%5D:after {
    content: “21D7”;
    font-size: 130%;}

    #113021
    barney
    Participant

    Hiya Glenn,

    I’m not sure exactly what you mean by a ‘data icon’, but I assume you’re talking about using non-standard glyphs to insert vector graphics — in which case http://fontello.com/ can help you. Upload non-standard fonts, select the glyphs you want, and create a reduced font with only the glyphs you need, and accessible, semantics-free CSS introducing the fonts.

    #113027
    GAtkins
    Member

    barney,

    That’s exactly what I want and have already downloaded and set up a number of icon glyphs. I know how to insert them into html, but don’t know the syntax and would like to insert them on external (only) links via CSS3 once, rather than in html multiple times.

    Thanks for your help. Any further ideas?

    Glenn

    #113033
    Paulie_D
    Member
    #113044
    JoniGiuro
    Participant

    with this snippet you get a list of all the links that don’t contain the same domain as the page you’re currently on:

    var host = window.location.host;
    $(‘a’).each(function(e){
    var curLink = $(this);
    var curLinkHref = curLink.attr(‘href’);
    if(typeof curLinkHref != ‘undefined’){
    if(curLinkHref.indexOf(host) == -1){
    console.log(curLinkHref);
    }
    }
    });

    #113053
    GAtkins
    Member

    @Paulie, That’s exactly what I’m trying to do, but I cannot get the syntax correct.

    In the Icomoon style sheet it says this:

    /* Use the following CSS code if you want to use data attributes for inserting your icons */
    [data-icon]:before {
    font-family: ‘icomoon’;
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    }

    but something is wrong or missing in my syntax below.

    .footerdivleft a[href^=”http://”%5D:after, .footerdivmiddle a[href^=”http://”%5D:after, .footerdivright a[href^=”http://”%5D:after {
    font-family: ‘icomoon’;
    content: attr(‘&#xe070’);}

    Any ideas? @Joni, your solution blows my still newbie mind.

    Glenn

    #113054
    amoss
    Participant

    .footerdivleft a[href^=”http://”%5D:after, .footerdivmiddle a[href^=”http://”%5D:after, .footerdivright a[href^=”http://”%5D,
    .footerdivright:after {
    font-family: ‘icomoon’;
    content: attr(‘&#xe070’);}

    Would that work?

    #113059
    GAtkins
    Member

    @amoss,

    Unfortunately it didn’t, but thanks for the suggestion.

    Glenn

    #113061
    Paulie_D
    Member

    Have you seen this: https://css-tricks.com/html-for-icon-font-usage/

    I’m not sure but I usually specify the dimension of the pseudo element and set it to display:block.

    Don’t know if it helps but it never seems to hurt.

    #113063
    GAtkins
    Member

    @Paulie,

    Yes I have and thank you. It is working fine in html on my dropdown links like the example shows, and I suppose I could just do it in html with the external links also, but I was trying to figure out a way to append them using CSS so I wouldn’t have to remember every time for every external link.

    Glenn

    #113064
    Paulie_D
    Member

    Glenn….it’s not as ‘elegant’ but this works: http://codepen.io/anon/pen/tJKva

    #113069
    GAtkins
    Member

    Thanks everybody for your help.

    I finally got it to work as follows:

    .footerdivleft a[href^=”http://”%5D:after, .footerdivmiddle a[href^=”http://”%5D:after, .footerdivright a[href^=”http://”%5D:after {

    font-family: ‘icomoon’;
    content: “e076”;
    padding-left: 10px;}

    The trick was to remove the &#x from the beginning of the glyph code and the ; from the end. The original glyph code was & # x e 0 7 6 ; without the spaces.

    Thanks again for all the help. Much appreciated.

    Glenn

    #130441
    DeTodo
    Member

    Hey guys,

    firstly many thanks to GAtkins. Not only did he ask exactly what I needed to know, he came back and shared his answer for our benefit :) . Thank you!

    I’ve been able to implement the solution. I’m using it to add icons to my menu items. Now I’m praying I will be able to change the color of the icon on hover using this technique. So far all my attempts have been fruitless. PLEASE tell me I’m being stupid and this is actually possible!?

    I thought this would work…

    ul li a[href^=”/music”]:before {
    content: “e005”;
    color: #004078;

    &:hover {
    color: #000;
    }
    }

    #130442
    DeTodo
    Member

    Many thanks in advance.

    #130445
    TheDoc
    Member

    You are very close! You can’t actually ‘hover’ a pseudo-element, so you’ll need to go like this:

    ul li a[href^=”/music”] {
    &:before {
    content: “e005”;
    color: #004078;
    }

    &:hover:before {
    color: #000;
    }
    }

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.