18 febbraio 2015

Font awesome come installarli

Buongiorno a tutti
questa settimana  è davvero esplosiva,stanno succedendo un pò di cose,ma per scaramanzia non voglio parlarne adesso. Inoltre è giusto che vi dica che se cercate la pagina facebook e twitter non esistono più in un momento di follia  ho disattivato l´account,ma in effetti mi sono resa conto di non avere o meglio non ho mai avuto il tempo per interagire con i miei followers di  twitter malgrado lievitavano (1009) e su facebook mi impegnavo,ma sempre con scarsi risultati.Ci vuole una costanza e un  energia che signori miei non ho cè anche la vita reale.

Bando alle ciance oggi parleremo di fonts avete mai sentito parlare di Font awesome? Sono dei font che vanno molto di moda adesso utilizzatissimi dai web design e che attraverso il CSS possiamo scrivere una stringa et voilà che appare sulla nostra pagina l´immagine che ne deriva.
Per installare i font awesome nel nostro blog basta inserire sotto   <head> del nostro templare questo codice
 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Ma non è finita possiamo scaricare il font ed aprirlo con photoshop per editare le nostre fote,ogni volta puoi copiare ed incollare con il font awesome da questa pagina. Ma adesso andiamo a vedere un pò di  esempi  che possiamo fare nel nostro blog
1 esempio

 <span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-desktop fa-stack-1x fa-inverse"></i>
</span>
2 esempio

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

3 esempio
<span class="twitter-button">
    <a href="https://twitter.com/username">
    <span class="fa-stack fa-4x">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>
    </a>
</span>
<span class="facebook-button">
    <a href="https://facebook.com/wanesia">
    <span class="fa-stack fa-4x">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
    </span>
    </a>
</span>
<span class="instagram-button">
    <a href="https://instagram.com/username">
    <span class="fa-stack fa-4x">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
    </span>
    </a>
</span>
</div> 

4 esempio
  <span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-lemon-o fa-stack-1x"></i>
</span>

5 esempio Desktop
free

 <a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-desktop fa-2x pull-left"></i> Desktop<br>free</a>

Spero che il tutorial con gli esempi ti sia piaciuto,se hai delle domande non esitare a scrivermi.
XOXO

Nessun commento:

Posta un commento

Instagram

Pinterest