Appending A Data-Icon To An External Link With CSS3

[GAtkins]

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%;}

[barney]

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.

[GAtkins]

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

[Paulie_D]

Do you mean this: https://css-tricks.com/snippets/css/style-links-depending-on-destination/

[JoniGiuro]

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

[GAtkins]

@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

[amoss]

.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?

[GAtkins]

@amoss,

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

Glenn

[Paulie_D]

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.

[GAtkins]

@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

[Paulie_D]

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

[GAtkins]

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

[DeTodo]

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;
}
}

[DeTodo]

Many thanks in advance.

[TheDoc]

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;
}
}

[Author]

Posts