editing font awesome icons

[Greenix]

I was messing with this icon ( see attached) and using a simple find and replace. Note, ME for the this DID NOT work and I made a mess of things. It's on the client area, product details view

What is the best way to change this icon out? It really should be that easy right?

 

Thanks in advance for your assistance!!

 

Edited February 11, 2016 by Greenix
typos

[brian!]

it's in one of the templates... clientareaproductdetails.tpl ?

 

<i class="fa fa-{if $type eq "hostingaccount" || $type == "reselleraccount"}hdd-o{elseif $type eq "server"}database{else}archive{/if} fa-stack-1x fa-inverse"></i>

the above icon is the hdd-o icon I think.

[Greenix]

This is what happens with a simple replace. I know this icon is somewhere else in the templates like even css? I think I saw it but even changing that messed up too.

See screenshot

 

from this

to this

 

here's what I changed, you can see the 3 locations I changed out "stacks" for "truck":

 

<div class="row">
                   <div class="col-md-6">

                       <div class="product-status product-status-{$rawstatus|strtolower}">
                           <div class="product-icon text-center">
                               <span class="fa-truck fa-lg">
                                   <i class="fa fa-circle fa-truck-2x"></i>
                                   <i class="fa fa-{if $type eq "hostingaccount" || $type == "reselleraccount"}hdd-o{elseif $type eq "server"}database{else}archive{/if} fa-truck-1x fa-inverse"></i>
                               </span>
                               <h3>{$product}</h3>
                               <h4>{$groupname}</h4>
                           </div>

[brian!]

why did you get rid of stack ? it's used to stack multiple icons on top of each other to give you more display options... truck is just a standard icon with no such power...

 

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

by removing stack, instead of the icons being on top of each other, they'll be side-by-side - as per your image.

 

try changing 'truck' back to 'stack'... and if you want to use a unique icon for this product, it would be easier to just change the {if} statement...

 

 <span class="fa-stack fa-lg">
                                   <i class="fa fa-circle fa-stack-2x"></i>
                                   <i class="fa fa-{if $type eq "hostingaccount" || $type == "reselleraccount"}hdd-o{elseif $type eq "server"}database{elseif $product eq "One Bin"}trash{else}archive{/if} fa-stack-1x fa-inverse"></i>
                               </span>

I would guess that $type would equal "other" for this product - but you might have many "other" products requiring different icons, so it would be easier to use $product and check for the product name and then apply the appropriate icon for that product.

Edited February 12, 2016 by brian!

[Greenix]

Oh I feel so stupid, I was thinking stack was an image for a server "stack," I'm getting too old for this.

Yup, makes sense now why it was "unstacking"

 

I simply replaced hdd-o with truck, I guess I just didn't see it tucked in there. I bolded it for this post. I don't think I need to take it any further for our needs. It's pretty basic.

 

 <div class="product-status product-status-{$rawstatus|strtolower}">
                           <div class="product-icon text-center">
                               <span class="fa-stack fa-lg">
                                   <i class="fa fa-circle fa-stack-2x"></i>
                                   <i class="fa fa-{if $type eq "hostingaccount" || $type == "reselleraccount"}[b]truck[/b]{elseif $type eq "server"}database{else}archive{/if} fa-stack-1x fa-inverse"></i>
                               </span>
                               <h3>{$product}</h3>
                               <h4>{$groupname}</h4>
                           </div>

 

All set now!!

 

Thanks and sorry about time wasted with this post-