Cum se instaleaza si se utilizeaza Font Awesome

Vezi subiectul anterior Vezi subiectul urmator In jos

  • 0

Tutorial Cum se instaleaza si se utilizeaza Font Awesome

Mesaj Scris de Emanuel la data de Mier 2 Dec - 20:05

Cum se instaleaza si se utilizeaza Font Awesome
Salutare  La revedere ,

Acest tutorial explica modul in care puteti instala si utiliza Font Awesome pe Forumgratuit. Mai jos gasiti cateva comenzi rapide, astfel incat sa puteti sari la o sectiune specifica.



Ce este Font awesome?

Font Awesome este un font iconic care va permite sa afisati pictograme prin utilizarea css-ului, sau prin simpla inserarea a simbolului dorit. Este folosit de majoritatea site-urilor web incluzand Forumgratuit.


Instalare Font Awesome

Exista doua metode de instalare a Font Awesome pe forumul dumneavoastra.

[Metoda 1] Instalam in template

Panou de Administrare Afisare Template-uri General overall_header  Modificare

Inainte de a incepe editarea sablonul, apasati aici si copiati codul furnizat in cea mai simpla metoda de MaxCDN.  Aceasta va fi utilizat pentru a instala Font Awesome in forum.


Gasiti {T_HEAD_STYLESHEET} in template-ul overall_header si inaintea lui adaugati codul furnizat de MaxCDN, astfel incat rezultatul sa fie cam asa:
Cod:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{T_HEAD_STYLESHEET}

[Metoda 2] Instalare cu ajutorul Javascript

Panou de Administrare Module HTML & JAVASCRIPT Gestiunea codurilor JavaScript


  • Titlu: Font Awesome
  • Amplasare: Toate paginile
  • Cod:

    Cod:

    (function() {
      var FA = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
          a = document.createElement('LINK');
      a.rel = 'stylesheet';
      a.type = 'text/css';
      a.href = FA;
      document.getElementsByTagName('HEAD')[0].appendChild(a);
    })();



Informatii Font Awesome


Acum, dupa ce Font Awesome a fost instalat, veti dori sa il utilizati la imbunatatirea design-ului forumului dumneavoastra. Aici aveti o lista cu icon-urile disponibile

Exemple de utilizare a Font Awesome


1. Elemente CSS


Acest lucru poate fi realizat prin copierea pictogramei dorite din aceasta lista si lipirea ei ca valoare de continut. Exemplu:
Cod:
a.mainmenu:before, a.mainmenu::before {
  content:"";
  font-family:FontAwesome;
}

2. Utilizeaza Font Awesome in mesaje

Font Awesome poate fi folosit in mesaje folosind tag-ul font.
Panou de Administrare Module HTML & JAVASCRIPT Gestiunea codurilor JavaScript


  • Titlu: SCEditor FontAwesome
  • Amplasare: Toate paginile
  • Cod:

    Cod:

    $(function(){
      if (!$.sceditor) return;
      $.sceditor.defaultOptions.fonts += ',FontAwesome';
    });



Cod:
An [font=FontAwesome][color=#ff0000][/color][/font] for you.

3. Utilizare Font Awesome in HTML

Atentie: Pentru a face acest lucru posibil, trebuie sa avem instalat in template codul MaxCDN intre <head> </head>.


Codul HTML:
Cod:
<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>

Acesta este un exemplu prin utilizarea unei pagini HTML.
Puteti vedea o previzualizare aici, si codul utilizat mai jos.

Panou de Administrare Module HTML & JAVASCRIPT Administrare pagini HTML

Adaugam o noul pagina HTML cu urmatoarele optiuni:
Doriti sa utilizati partea de sus si de jos a paginii forumului dvs.?: Nu
Utilizati aceasta pagina ca pagina de start?: Nu

Cod:
<!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="http://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>

Succes  Floare


Tutorial scris de Ange Tuteur, tradus de Emanuel
Copyright ˆForumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar

Emanuel
Membru onorific
Membru onorific

Mesaje : 3190
Varsta : -11
Data înscrierii : 06/11/2012
Multumiri : 844
Niciun avertisment

Vezi profilul utilizatorului http://www.infinigame.biz/
Emanuel a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum