Customizing Your Post Meta Data

In this short tutorial I am going to show you how to add Font Awesome icons in your post-meta with the Framework Theme. The first thing you need to know is that if you are not using a child theme the changes will not stick, so be sure to create one or use the one provided by PageLines. This is what the end result should look like once we are done.

iheart pagelines

Choosing your post meta information

You can adjust the way you post is display simple by going to  pagelines > settings > content. Once there you should see some default shortcodes in place.

Using shortcode you can choose how and what you want displayed. Here are the shortcodes available.

[post_time][post_date][post_categories][post_tags]
[post_comments][post_edit][post_author]

And to further customize the look you can add icons and  words in front of the shortcodes like published by, posted on, and created on to spice things up.

Adding font awesome icons

To add font awesome to the post meta you will need to know the unicode for the icon. To get the uni-code I had to refer to the Font Awesome Cheat Sheet. Note that you do not need the whole code just part of it, actually just the last 4. Take the last 4 of the code and accompany that with a “\” and you have your icon. Example:

content: "\f073";

Along with that you will need to state the font-family which is PageLinesFont. Example:

font-family: 'PageLinesFont';

The end result should look similar to this. I added some margin to give the meta some room.

time.date.time.published.updated.sc::before {
content: "\f073";
font-family: 'PageLinesFont';
margin-right: 5px;
}

span.author.vcard.sc::before {
content: "\f007";
font-family: 'PageLinesFont';
margin-right: 5px;
}

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

4 Responses to "Customizing Your Post Meta Data"
  1. Just realized you can actually do this for individual tags, categories, and a lot of other stuff as well, by using an attribute selector.
    Tags and categories could be targetet with a [href="http://link.to/term/archive"]-selector, so you can add different icons to different tags and categories.

Leave a Reply

Your email address will not be published. Required fields are marked *


Customizing Your Post Meta Data

Published on by | 4 Comments

In this short tutorial I am going to show you how to add Font Awesome icons in your post-meta with the Framework Theme. The first thing you need to know is that if you are not using a child theme the changes will not stick, so be sure to create one or use the one provided by PageLines. This is what the end result should look like once we are done.

iheart pagelines

Choosing your post meta information

You can adjust the way you post is display simple by going to  pagelines > settings > content. Once there you should see some default shortcodes in place.

Using shortcode you can choose how and what you want displayed. Here are the shortcodes available.

[post_time][post_date][post_categories][post_tags]
[post_comments][post_edit][post_author]

And to further customize the look you can add icons and  words in front of the shortcodes like published by, posted on, and created on to spice things up.

Adding font awesome icons

To add font awesome to the post meta you will need to know the unicode for the icon. To get the uni-code I had to refer to the Font Awesome Cheat Sheet. Note that you do not need the whole code just part of it, actually just the last 4. Take the last 4 of the code and accompany that with a “\” and you have your icon. Example:

content: "\f073";

Along with that you will need to state the font-family which is PageLinesFont. Example:

font-family: 'PageLinesFont';

The end result should look similar to this. I added some margin to give the meta some room.

time.date.time.published.updated.sc::before {
content: "\f073";
font-family: 'PageLinesFont';
margin-right: 5px;
}

span.author.vcard.sc::before {
content: "\f007";
font-family: 'PageLinesFont';
margin-right: 5px;
}

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

4 Responses to "Customizing Your Post Meta Data"
  1. Just realized you can actually do this for individual tags, categories, and a lot of other stuff as well, by using an attribute selector.
    Tags and categories could be targetet with a [href="http://link.to/term/archive"]-selector, so you can add different icons to different tags and categories.

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match