Sticky/Lock FontAwesome Icon Replacement

Sticky/Lock FontAwesome Icon Replacement

Sheldon

Well-known member
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...
 
This is the only one I can not seem to upgrade to font awesome 4.0.3

I don't think it likes the <span> tag
 
Change it to whatever you want... <adamhoward> <xenforo> <whatever>.
:cautious:

Well I tried changing it to <i> tag as font awesome suggest, but that pushes it all the way to the left.

Was hoping maybe you had some insight on a working solution. :coffee:
 
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.
 
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;
}
 
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).
 
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.
 
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.
 
Top Bottom