The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to install and use Font Awesome

2 posters

Go down

Tutorial How to install and use Font Awesome

Post by Ange Tuteur April 10th 2015, 11:37 pm

How to install and use Font Awesome

       
       This tutorial will explain how you can install and use Font Awesome on your Forumotion forum. Below you can find some shortcuts so you can jump to a specific section.
       

                    
  1. What is Font Awesome ?
  2. Installing Font Awesome   
  3. Font Awesome Information    
  4. Examples of using Font Awesome on Forumotion    

       
       


           

How to install and use Font Awesome 09615110 What is Font Awesome ?

       
       Font Awesome is an iconic web font which allows you to display icons through the use of CSS Classnames, or by simply copy and pasting the icon. The icons provided have an awesome range of uses, from form control to loading icons. It's used by a large majority of websites, Forumotion included, so why shouldn't you make use of these awesome icons as well ?
       
How to install and use Font Awesome Faicon10
       
             

How to install and use Font Awesome 09615110 Installing Font Awesome

       
       Depending on your Administration status, there are two methods to install Font Awesome on your forum. Please choose the method which best suits your situation.
       
       
       [Method 1] Installation via the templates
       
       If you're the founder or have access to the founder's account, you can modify the templates to install Font Awesome. Otherwise, if you're only an Administrator and don't have access to the founder's account, please see Method 2.
       
       To install it via the templates go to Administration Panel > Display > Templates > General and open the template titled overall_header Edit
       
       Find {T_HEAD_STYLESHEET} in the overall_header template, and replace it with the code provided below :
       
Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        {T_HEAD_STYLESHEET}
       Once you're finished, go ahead and click save, then publish the template and Font Awesome is installed ! Add
       
         [Method 2] Installation via JavaScript
       
       This method is the simplest and allows you to install Font Awesome by appending the stylesheet to the <head> element without access to the templates. To install it, go to Administration Panel > Modules > JavaScript codes management, make sure JavaScript code management is enabled, then create a new script.
       
       Title : FontAwesome
       Placement : In all the pages
       Paste the following script :
       
Code:
document.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">');
       Go ahead and click save, and Font Awesome will be installed ! thumright
       

              

How to install and use Font Awesome 09615110 Font Awesome Information

       
       Now that you've installed Font Awesome, you'll want to get to know how to use it in your forum's design. For a list of examples, take a look at this page.
       
       For a large list of the icons provided with Font Awesome, use the cheatsheet. You can copy and paste these icons in your CSS content, or on the forum provided you're using the FontAwesome font. See the next section for a few examples of using Font Awesome on Forumotion. Smile
       

              

How to install and use Font Awesome 09615110 Examples of using Font Awesome on Forumotion

       
       
       1. CSS Pseudo Element
       
       Let's say I wanted to add the fa-link icon next to my navbar links. This can be done by copying the link icon from the cheatsheet and pasting it as the content value. Lastly we need to set the font-family as FontAwesome so the icons display properly. Our result would be :
       
       How to install and use Font Awesome Captur21
       
Code:
a.mainmenu:before, a.mainmenu::before {
          content:"";
          font-family:FontAwesome;
        }
       
       Note : You can add up to two pseudo elements on an element by using ::before and ::after. We're using :before and ::before, because in CSS3 :before was changed to ::before ( along with :after ) for better distinction between pseudo elements and pseudo classes. It's good practice to use both for better support for older browsers.
       
       Here's one more example of using CSS pseudo elements. This time we're going to use ::before and ::after to stack two icons. The second icon needs to be absolutely position, so make sure that the element you're applying this to is relative or any positioning other than static !
       
       In this example we've placed the fa-user and fa-circle-o icon to the left of the members navigation link. Giving us the following result :
       How to install and use Font Awesome Captur23
       
Code:
a.mainmenu[href="/memberlist"] { position:relative }
        a.mainmenu[href="/memberlist"]:before, a.mainmenu[href="/memberlist"]::before {
          content:"";
          color:#666;
          font-family:FontAwesome;
          font-weight:normal;
          font-size:13px;
          margin:0 10px;
        }
        a.mainmenu[href="/memberlist"]:after, a.mainmenu[href="/memberlist"]::after {
          content:"";
          color:#999;
          font-family:FontAwesome;
          font-weight:normal;
          font-size:24px;
          position:absolute;
          left:5px;
          top:-6px;
        }
       To put an icon next to a specific link, you must use the CSS attribute selector. In the example we selected a.mainmenu only with the href value of /memberlist. ( [href="/memberlist"] )
       
       
       2. Using Font Awesome in messages
       
       Font Awesome icons can be used in your messages by using the font tags. To make it simple, you can add font awesome to the editor by going to Administration Panel > Modules > JavaScript codes management create a new script.
       
       Title : SCEditor FontAwesome
       Placement : In all the pages
       Paste the following code and submit :
       
Code:
$(function(){
          if (!$.sceditor) return;
          $.sceditor.defaultOptions.fonts += ',FontAwesome';
        });
       
       This will add font awesome to the font list, so you can add awesome icons to your posts. Simply click the font then choose an icon from the cheatsheet and paste it between the tags. Once you preview or post the message, the icon should display. Wink
       
How to install and use Font Awesome Fa310
       
Code:
An [font=FontAwesome][color=#ff0000][/color][/font] for you.
       
       
       3. Using Font Awesome in HTML
       
       If you haven't opened the cheatsheet yet, you can do so [url=cheatsheet]here[/url]. The cheatsheet will provide the icon, classname, and unicode entity. In HTML, you can use the class name and the <i> element. Here are some examples :
       
       Exclamation Attention : If you're using an HTML page without your forum header, you must reinstall FontAwesome by pasting the MaxCDN link element in your <head> element.
       
       
       A small example of using vehicle icons.
       How to install and use Font Awesome Captur22
       
       This can be applied to a widget, or anywhere HTML formats.
       
Code:
    <style type="text/css">a.example-fa { font-size:12px; font-weight:bold; display:block; margin:3px 0; } a.example-fa i { width:30px; text-align:center; }</style>
            <a class="example-fa" href="#"><i class="fa fa-car"></i>Cars</a>
            <a class="example-fa" href="#"><i class="fa fa-truck"></i>Trucks</a>
            <a class="example-fa" href="#"><i class="fa fa-motorcycle"></i>Motorcycles</a>
       
       
       Here is one more HTML example, by using an HTML page without your header. This makes use of the fa-spinner and fa-spin class names to make a loading icon which spins.
       
       You can see a preview here, and apply the code here :
       Administration Panel > Modules > HTML pages management create a new HTML page with the following options :
       
       Use your forum's header and footer : No
       Set as homepage : No
       Paste the following code and submit :
       
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        
          <head>
            <title>Loading...</title>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
            <link href="https://illiweb.com/fa/favicon/discussion.ico" rel="shortcut icon" type="image/x-icon"/>
            <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
            <style type="text/css">body{color:#FFF;font-size:12px;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;background:#39C}#loader{text-align:center;position:fixed;top:0;left:0;right:0;bottom:0;border-top:50px solid #333;border-bottom:50px solid #333}#content{height:100px;margin-top:-50px;position:absolute;top:50%;left:0;right:0}</style>
          </head>
        
          <body>
            <div id="loader">
              <div id="content">
                <i class="fa fa-spinner fa-spin fa-5x"></i>
                <p>Loading please wait...</p>
              </div>
            </div>
          </body>
        
        </html>
       
       
       For more on Font Awesome, check out the website for examples, information, and more. If you have any questions, our team is always ready. Be creative and make your forums awesome ! :party:
       
       
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

trajce likes this post

Back to top Go down

Tutorial Re: How to install and use Font Awesome

Post by Ape March 21st 2018, 5:51 pm

This code was updated to give you more icons if you want them.
Please Note that this is for font Awesome 4.7.0

The update was added on: 03.21.2018 / 16:49:36
With Thanks to Ange Tuteur.


How to install and use Font Awesome Left1212How to install and use Font Awesome Center11How to install and use Font Awesome Right112
How to install and use Font Awesome Ape_b110
How to install and use Font Awesome Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19075
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum