Rendere i bottoni più moderni con Font Awesome

Da Teodor Lun 27 Giu 2016 - 21:53

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.

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

:permisos: salviamo le modifiche.

Andiamo ora a creare un altro Javascript

Codice:: jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_quote.png']").replaceWith(' CITA'); }); jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_edit.png']").replaceWith(' MODOFICA'); }); jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_delete.png']").replaceWith(' ELIMINA'); }); jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_ip.png']").replaceWith(' IP'); }); jQuery(function($) { $("img[src='http://2img.net/s/t/20/31/02/i_icon_report.png']").replaceWith(' RAPPORTO'); });

Da modificare nel codice:

https://2img.net/s/t/20/31/02/i_icon_quote.png - eliminate e sostituite con l'immagine attuale della citazione
https://2img.net/s/t/20/31/02/i_icon_edit.png - eliminate e sostituite con l'immagine attuale del bottone "modifica"
https://2img.net/s/t/20/31/02/i_icon_delete.png - eliminate e sostituite con l'immagine attuale di "elimina"
https://2img.net/s/t/20/31/02/i_icon_ip.png - eliminate e sostituite con l'immagine attuale di "vedere IP"

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; }

Salviamo Le Modifche

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

Saluti da Forumattivo