CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Add Icon between each Div

I have a very simple page on my site: http://jsfiddle.net/95sptas0/

Using only CSS, how do I add an icon between each .post div? I'd like one after each .post div except the last. I'm hoping to use this icon: http://fortawesome.github.io/Font-Awesome/icon/arrow-down/

.post {
    margin-bottom:50px;
    background:#eaeaea
}
<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>

<div class="post">
    <h1>This is a Post</h1>
</div>

Upvotes: 4

Views: 4890

Answers (3)

Goodlife
Goodlife

Reputation: 3922

first download the library http://fortawesome.github.io/Font-Awesome/

read more here on how to use it http://fontawesome.io/3.2.1/get-started/

then import it ELSE try this and play around removing the icon from heading elements

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="post">
<h1>This is a Post</h1>
</div>
<i class="fa fa-arrow-down"></i>
<div class="post">
<h1><i class="fa fa-arrow-down"></i>This is a Post</h1>
</div>

<div class="post">
<h1><i class="fa fa-arrow-down"></i>This is a Post</h1>
</div>

Upvotes: 1

user2959229
user2959229

Reputation: 1355

After including the "FontAwesome" font, the following CSS might do it:

.post::after { 
    content: "\f063";
    font-family:'FontAwesome';
}

\f063 is the code for the "down arrow" using the FontAwesome font.

In order for you to apply this to every element except your last, you can use the last-of-type selector:

.post:last-of-type::after { 
    display: none;
}

Upvotes: 4

Starx
Starx

Reputation: 78971

The font awesome icons requires to have an element with defined class. In you case this is <i class="fa fa-arrow-down"></i>. Since this is a new element you cannot use CSS to handle DOM manipulation.

If you can opt for text based unicode icons and font-based icons however, it will be possible through adjacent selector.

.post+.post::before {
    content: "↓";
}

Demo: http://jsfiddle.net/95sptas0/4/

Upvotes: 3

Related Questions