- This topic is empty.
-
AuthorPosts
-
October 30, 2012 at 9:25 pm #40533GAtkinsMember
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%;}October 31, 2012 at 9:38 am #113021barneyParticipantHiya 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.
October 31, 2012 at 10:08 am #113027GAtkinsMemberbarney,
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
October 31, 2012 at 10:56 am #113033Paulie_DMemberOctober 31, 2012 at 12:47 pm #113044JoniGiuroParticipantwith 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);
}
}
});October 31, 2012 at 2:31 pm #113053GAtkinsMember@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(‘’);}Any ideas? @Joni, your solution blows my still newbie mind.
Glenn
October 31, 2012 at 2:49 pm #113054amossParticipant.footerdivleft a[href^=”http://”%5D:after, .footerdivmiddle a[href^=”http://”%5D:after, .footerdivright a[href^=”http://”%5D,
.footerdivright:after {
font-family: ‘icomoon’;
content: attr(‘’);}Would that work?
October 31, 2012 at 4:00 pm #113059October 31, 2012 at 4:08 pm #113061Paulie_DMemberHave 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.
October 31, 2012 at 4:32 pm #113063GAtkinsMember@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
October 31, 2012 at 5:22 pm #113064Paulie_DMemberGlenn….it’s not as ‘elegant’ but this works: http://codepen.io/anon/pen/tJKva
October 31, 2012 at 8:00 pm #113069GAtkinsMemberThanks 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
April 2, 2013 at 2:17 pm #130441DeTodoMemberHey 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;
}
}April 2, 2013 at 2:17 pm #130442DeTodoMemberMany thanks in advance.
April 2, 2013 at 2:25 pm #130445TheDocMemberYou 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;
}
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.