CODEWITHSUNDEEP
cssfont-awesome
tonyedwardspz
tonyedwardspz

Reputation: 1875

Add font-awesome icons to social media links sitewide using CSS

I'm already using various font-awesome icons on a website.

I'd like to add icons to social media links within my blog posts without having to add them manually to every link.

The structure of a blog post is as follows

<div class="blog-post>
    <p>This is some text with a <a href="http:twitter.com">social media link</a> in it</p>
</div>

How can i target these links adding a FA icon using css?

Upvotes: 0

Views: 989

Answers (2)

sOOsOOry
sOOsOOry

Reputation: 231

Use :after in your CSS block and write like:

.blog-post:after {
  font-family: sans-serif; //or any other you want
  content: "\f099"; // twitter icon
  .............  //other stuff

Upvotes: 0

tonyedwardspz
tonyedwardspz

Reputation: 1875

To target a twitter href you can use this CSS selector;

[href*="twitter"]

The * indicates the proceeding value must appear somewhere within the attribute's value. In this case it will target any URL containing the string 'twitter'.

Combining this with the :after selector will place something after the targeted link.

[href*="twitter"]:after

To combine this with font-awesome you would do something like this, remembering to limit it to the blog-post class;

.blog-post [href*="twitter"]:after {
    font-family: FontAwesome;
    content: "\f099"; // twitter icon
    text-decoration: none; // removes underline from the icon in some browsers
    display: inline-block; // removes underline from the icon in some browsers
    padding-left: 2px; 
}

Upvotes: 5

Related Questions