Sticky/Lock FontAwesome Icon Replacement

Sticky/Lock FontAwesome Icon Replacement

Overview Reviews (6) Discussion
Sheldon

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...
Click to expand...

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
 
Sheldon said:
Change it to whatever you want... <adamhoward> <xenforo> <whatever>.
Click to expand...
: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;
}
 
Sheldon said:
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;
}
Click to expand...

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.
 
Sheldon said:
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.
Click to expand...
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.
 
You must log in or register to reply here.
Back
Top Bottom