Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Cum se instaleaza si se utilizeaza Font Awesome

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Cum se instaleaza si se utilizeaza Font Awesome

Mesaj Scris de Mihai Lun Mai 11, 2020 12:20 am

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.



Cum se instaleaza si se utilizeaza Font Awesome 09615110Ce 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.

Cum se instaleaza si se utilizeaza Font Awesome Faicon10

Cum se instaleaza si se utilizeaza Font Awesome 09615110Instalare Font Awesome

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

[Metoda 1] Instalam in template

Cum se instaleaza si se utilizeaza Font Awesome PucePanou de Administrare Cum se instaleaza si se utilizeaza Font Awesome Arrow10 Afisare Cum se instaleaza si se utilizeaza Font Awesome Arrow10Template-uri Cum se instaleaza si se utilizeaza Font Awesome Arrow10GeneralCum se instaleaza si se utilizeaza Font Awesome Arrow10 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.

Cum se instaleaza si se utilizeaza Font Awesome Fa210

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

Cum se instaleaza si se utilizeaza Font Awesome PucePanou de Administrare Cum se instaleaza si se utilizeaza Font Awesome Arrow10 Module Cum se instaleaza si se utilizeaza Font Awesome Arrow10 HTML & JAVASCRIPTCum se instaleaza si se utilizeaza Font Awesome Arrow10 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);
    })();



Cum se instaleaza si se utilizeaza Font Awesome 09615110Informatii 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

Cum se instaleaza si se utilizeaza Font Awesome 09615110Exemple de utilizare a Font Awesome


1. Elemente CSS

Cum se instaleaza si se utilizeaza Font Awesome Oaocus
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.
Cum se instaleaza si se utilizeaza Font Awesome PucePanou de Administrare Cum se instaleaza si se utilizeaza Font Awesome Arrow10 Module Cum se instaleaza si se utilizeaza Font Awesome Arrow10 HTML & JAVASCRIPTCum se instaleaza si se utilizeaza Font Awesome Arrow10 Gestiunea codurilor JavaScript


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

    Cod:

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



Cum se instaleaza si se utilizeaza Font Awesome Fa310
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 .

Cum se instaleaza si se utilizeaza Font Awesome Captur22
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.

Cum se instaleaza si se utilizeaza Font Awesome PucePanou de Administrare Cum se instaleaza si se utilizeaza Font Awesome Arrow10 Module Cum se instaleaza si se utilizeaza Font Awesome Arrow10 HTML & JAVASCRIPTCum se instaleaza si se utilizeaza Font Awesome Arrow10 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 actualizat de catre MIHAI
Numai bine,
Echipa Forumgratuit


 Forumul Forumurilor

Regulile Forumgratuit | Tutoriale |
FAQ | Recuperarea parolei pentru forum și unelte


*** Forumul de suport nu vă va solicita niciodată adresa de e-mail sau parola, așa că vă rugăm să nu le postați nicăieri! ***
Nu ofer suport prin PM!
Mihai

Mihai
Administrator
Administrator

Mesaje : 1583
Varsta : 26
Localizare : București, România
Data înscrierii : 25/09/2014
Mulțumiri : 103
Google Chrome Cum se instaleaza si se utilizeaza Font Awesome Be_110

http://fgsuport.forumgratuit.ro
Mihai a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum