Forums

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://"]:after, .footerdivmiddle a[href^="http://"]:after, .footerdivright a[href^="http://"]: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: http://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:

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://"]:after, .footerdivmiddle a[href^="http://"]:after, .footerdivright a[href^="http://"]:after {
font-family: 'icomoon';
content: attr('&#xe070');}

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

Glenn

amoss

.footerdivleft a[href^="http://"]:after, .footerdivmiddle a[href^="http://"]:after, .footerdivright a[href^="http://"],

.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: http://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://"]:after, .footerdivmiddle a[href^="http://"]:after, .footerdivright a[href^="http://"]: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;
      }
  }

DeTodo

You beauty!

Thank you so much :)

treehouse : what would you like to learn today?

Forums

[Solved] Appending A Data-Icon To An External Link With CSS3