Rendere i bottoni più moderni con Font Awesome


Tutorial Rendere i bottoni più moderni con Font Awesome

Messaggio Da teo il Lun 27 Giu 2016 - 21:53

Rendere i bottoni più moderni con Font Awesome 

Carissimi utenti,

Avete voglia di rendere più #moderno il vostro forum #forumattivo  Question  Con questo semplice tutorial potrete rendere i bottoni del vostro forum più semplici e moderni

Installazione di Font awesome


Pannello di amministrazione ► moduli  ► HTML&JAVASCRIPT  ► gestione dei codici Javascript  

:new:  Andiamo a cred un nuovo Javascript. 


  • Titolo: Font awesome
  • Posizione: tutte le pagine 
  • Codice: 

Codice:
(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); })();

:per:  salviamo le modifiche.

Modifica dei bottoni


:new:  Andiamo ora a creare un altro Javascript 


  • Titolo: bottoni moderni
  • Posizione: negli argomenti
  • Codice: 


Codice:
jQuery(function($) { $("img[src='http://hitsk.in/t/20/31/02/i_icon_quote.png']").replaceWith('<span class="butoanetopic butoanetopic-quote"><i class="fa fa-quote-right"></i> CITA</span>'); }); jQuery(function($) { $("img[src='http://hitsk.in/t/20/31/02/i_icon_edit.png']").replaceWith('<span class="butoanetopic butoanetopic-editeaza"><i class="fa fa-pencil-square-o"></i> MODOFICA</span>'); }); jQuery(function($) { $("img[src='http://hitsk.in/t/20/31/02/i_icon_delete.png']").replaceWith('<span class="butoanetopic butoanetopic-sterge"><i class="fa fa-scissors"></i> ELIMINA</span>'); }); jQuery(function($) { $("img[src='http://hitsk.in/t/20/31/02/i_icon_ip.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> IP</span>'); }); jQuery(function($) { $("img[src='http://hitsk.in/t/20/31/02/i_icon_report.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> RAPPORTO</span>'); });

Da modificare nel codice:

http://hitsk.in/t/20/31/02/i_icon_quote.png - eliminate e sostituite con l'immagine attuale della citazione
http://hitsk.in/t/20/31/02/i_icon_edit.png - eliminate e sostituite con l'immagine attuale del bottone "modifica"
http://hitsk.in/t/20/31/02/i_icon_delete.png - eliminate e sostituite con l'immagine attuale di "elimina"
http://hitsk.in/t/20/31/02/i_icon_ip.png - eliminate e sostituite con l'immagine attuale di "vedere IP"

Installazione del codice CSS


Passiamo ora al codice CSS e andiamo verso: Pannello di amministrazione ►visualizzazione ► colori ► foglio di stile CSS

Codice:
.butoanetopic { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); } .butoanetopic { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); cursor: pointer; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.42857143; margin-bottom: 0; padding: 3px 4px; text-align: center; touch-action: manipulation; user-select: none; vertical-align: middle; white-space: nowrap; } .butoanetopic-sterge { background-color: #B52A26; border-color: #902522; color: #fff; } .butoanetopic-sterge:hover { color: #fff; background-color: #c9302c; border-color: #ac2925; } .butoanetopic-quote { background-color: #CA8226; border-color: #9E661F; color: #fff; } .butoanetopic-quote:hover { background-color: #E48710; border-color: #CE7F1A; color: #fff; } .butoanetopic-editeaza { background-color: #1381C3; border-color: #0A71AF; color: #fff; } .butoanetopic-editeaza:hover { background-color: #1092E0; border-color: #0A71AF; color: #fff; } .butoanetopic-ip:hover { color: #fff; background-color: #157254; border-color: #0f543e; } .butoanetopic-ip { color: #fff; background-color: #1d9d74; border-color: #198764; }

:new: Salviamo Le Modifche

Risultato



Ecco qui, ora finalmente i nostri bottoni sono molto più moderni.

Saluti da Forumattivo

avatar
teo
Aiutattivo
Aiutattivo


Sesso : Maschile
Età : 21
Messaggi : 1670
Località : Cremona


Vedi il profilo dell'utente http://Ilforumditutti.net
teo è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum