XF 1.4 CSS/JS: Add font-awesome clock icon to date phrase


Well-known member

I`d like to move the post date from the privateControl section under the post to the div.messageUserBlock to the left of the post.

This works but as the messageUserInfo-Block is only 124px wide so the default date output in german is a bit too long. (and no, I don`t want to reduce the font size to make it fit in there)

Example: In the german language, the phrase "today_x_at_time_y" has the following content:
Heute um {time} Uhr
I had the idea to shorten the phrase with the font-awesome clock icon. I tried to change the phrase like this:
Heute, <i class="fa fa-clock-o"></i>{time}
But it seems that the date-phrases get processed by a PHP function. In the "post"-template I found the following snippet:
<xen:datetime time="$post.post_date" />
which is responsible for the post date output. The PHP function seems to insert the phrase into some JS var when the page is rendered:
    today_at_x:      "Heute <i class=\"fa fa-clock-o\"><\/i> %time% ",
This seems to make it impossible for the font awesome-CSS to transfer the code into the desired icon. When I insert the phrase directly into the template code:
<abbr>{xen:phrase today_at_x}</abbr>
everything works fine, the font-awesome clock icon will be rendered as desired.

So the problem seems to be that all phrases that get inserted via the jQuery.extend(XenForo.phrases function and contain font-awesome classes won`t be processed by the font-awesome CSS.

I`m stuck here as I don`t have enough knowledge to solve this.

Any help is appreciated.

thank you - all the best,


Well-known member
Add this to EXTRA.css
Thanks Chris. It`s almost perfect. The problem is, that older timestamps only contain the date and not the time. Also the clock icon should be displayed before the time. So I need to address the time within the abbr-element and insert the icon before it. But as soon as I wrap the time into some HTML like <i>{time}</i> , the <i> will get special char-ed and the CSS rule .messageUserInfo abbr.DateTime i:before won`t work.


Well-known member
I`m done with it now. Used the calendar icon and some little tweaks:


.messageUserInfo abbr,
.messageUserInfo span.DateTime {
    position: relative;
    padding: 5px 10px 5px 10px;
    line-height: 16px;
    font-size: 10px;

.messageUserBlock .arrow span {
    border-left-color:#d7edfc !important;

.messageUserInfo span.DateTime:before,
.messageUserInfo abbr.DateTime:before,
.message .privateControls span.DateTime:before,
.message .privateControls abbr.DateTime:before
    content: "\f073";
    font-family: FontAwesome;
    padding-right: 2px;


Well-known member
@sinucello I tried your code in Extra.css but result is only awesome font before post time, and post time is still under post.
What I am doing wrong.
I like the way you move post time above avatar


Well-known member
What I am doing wrong.
sorry, I forgot to add the changes I made to the "message_user_info" template:
Edit template "message_user_info"
find the line "<div class="avatarHolder">"
add "<xen:datetime time="$post.post_date" />"
before it.

Or even better: create a template modification ( /admin.php?template-modifications/add ) for it.