• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Sticky/Lock FontAwesome Icon Replacement

Sticky/Lock FontAwesome Icon Replacement

Sheldon

Well-known member
#1
Sheldon submitted a new resource:

Sticky/Lock FontAwesome Icon Replacement - Remove images, replace with FA.

Sticky/Lock FontAwesome Icon Replacement
View attachment 59351
Obviously, have FontAwesome in your PAGE_CONTAINER.

After <head>
add:
Code:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Now, to add the icons.

Open template thread_list_item

Find:
Code:
<xen:if is="!{$thread.discussion_open}"><span class="locked" title="{xen:phrase locked}">{xen:phrase...
Read more about this resource...
 

Adam Howard

Well-known member
#5
In font awesome 3.2.1 as you have displayed it
PHP:
<span class="icon-eye-open icon-fixed-width"></span>
In font awesome 4.0.3 that all changes to this though
PHP:
<span class="fa fa-eye fa-fw"></span>
However this doesn't work.
 

Sheldon

Well-known member
#6
Code:
        <xen:contentcheck>
           <xen:hook name="thread_list_item_icon_key" params="{xen:array 'thread={$thread}'}">
           <xen:if is="{$thread.isModerated}"><span class="moderated" title="{xen:phrase moderated}">{xen:phrase moderated}</span></xen:if>
           <xen:if is="!{$thread.discussion_open}"><adamhoward class="fa fa-lock fa-fw"></adamhoward></xen:if>
           <xen:if is="{$thread.sticky}"><adamhoward class="fa fa-thumb-tack fa-fw"></adamhoward></xen:if>
           <xen:if is="{$thread.isRedirect}"><span class="redirect" title="{xen:phrase redirect}">{xen:phrase redirect}</span></xen:if>
           <xen:if is="{$thread.thread_is_watched} OR {$thread.forum_is_watched}"><adamhoward class="fa fa-eye fa-fw"></adamhoward></xen:if>
           </xen:hook>
         </xen:contentcheck>
Extra.CSS
Code:
adamhoward.fa {
    float: right;
}
 

Adam Howard

Well-known member
#7
Code:
        <xen:contentcheck>
           <xen:hook name="thread_list_item_icon_key" params="{xen:array 'thread={$thread}'}">
           <xen:if is="{$thread.isModerated}"><span class="moderated" title="{xen:phrase moderated}">{xen:phrase moderated}</span></xen:if>
           <xen:if is="!{$thread.discussion_open}"><adamhoward class="fa fa-lock fa-fw"></adamhoward></xen:if>
           <xen:if is="{$thread.sticky}"><adamhoward class="fa fa-thumb-tack fa-fw"></adamhoward></xen:if>
           <xen:if is="{$thread.isRedirect}"><span class="redirect" title="{xen:phrase redirect}">{xen:phrase redirect}</span></xen:if>
           <xen:if is="{$thread.thread_is_watched} OR {$thread.forum_is_watched}"><adamhoward class="fa fa-eye fa-fw"></adamhoward></xen:if>
           </xen:hook>
         </xen:contentcheck>
Extra.CSS
Code:
adamhoward.fa {
    float: right;
}
Thank you @Sheldon (y)

It's a little creep that it worked. :ROFLMAO: And I don't think that would count as valid code. But <span> didn't work (for whatever reason) and using <i> just pushed other things to the right (that shouldn't be on the right).
 

Sheldon

Well-known member
#8
Just change it to:

i.fa {
float: right;}

The reason I used your name, I don't have a clue where else you have used the i.fa class or anything close. You can change it to whatever you want, just make the proper call in the CSS to have it float right.
 

Adam Howard

Well-known member
#9
Just change it to:

i.fa {
float: right;}

The reason I used your name, I don't have a clue where else you have used the i.fa class or anything close. You can change it to whatever you want, just make the proper call in the CSS to have it float right.
I did change it to

i.fa {
float: right;}

But that pushed a few other things to the right. So I'm using

fa.fa {
float: right;}

And that works. Just not sure about the validness of have <fa> </fa> as html tag.