Cum se instaleaza si se utilizeaza Font Awesome

Vezi subiectul anterior Vezi subiectul urmator In jos

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
Administrator
Administrator

masculin

Mesaje : 3132
Varsta : -12
Data de inscriere : 06/11/2012
Multumiri : 843
Niciun avertisment

http://www.infinigame.biz/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum