Icone social network con effetto di rotazione HTML&CSS
Si prega di disabilitare gli script di anti adblock per visualizzare questa pagina
NAV
Ciao, ospite! Accedi o Registrati su Stertix.it
LoginRegistrati
Registrati adesso è GRATUITO

Appena entrato avrai:
Norton Safe Web Connessione HTTPS Sicura

Registrati Adesso!

Pubblicità


Tag: Icone, social, network, Nuovo, style, HTML,
Nuova Discussione
Rispondi alla Discussione
 
Valutazione discussione:
  • 0 voti - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Guida Icone social network con effetto di rotazione HTML&CSS
409 Visite
Tecnico e Gestore
*******
22.50C
2013 Mar
125
1,346
Amministratore

Grafico
Utente Hacker
Utente Notturno
Youtubers
Messaggio: #1
Wink Guida Icone social network con effetto di rotazione HTML&CSS
19/11/2016 17:42

Aggiorna il tuo account per nascondere gli annunci pubblicitari.

[Immagine: yqOiskL.png]

Ciao utenti di stertix forum, oggi vi posto dei codici per fare delle Icone social network con effetto di rotazione da inserire nel vostro sito web.
non è difficile anzi è molto facile basta saper dove mettere le mani.
se siete qui perché cercavate delle icone di social network o volete solo saperlo per informazione, bene questa guida è giusta per voi.


Ecco la demo


Iniziamo.


Per prima cosa vi posto i codici HTML & CSS


Allora:


HTML:

per prima cosa dovete andare sopra e cercare <head> e dentro dovete incollare questo:

Codice
<link rel='stylesheet prefetch' href='http:////netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

questo codice di qua sopra deve stare dentro fra <head> e </head>

adesso lasciamo stare <head> e andiamo dentro a <body> e inseriamo questo codice dove vogliamo.

Codice
<ul class="social-icons icon-circle icon-rotate list-unstyled list-inline">
        
        <li><a href="#"><i class="fa fa-adn"></i></a> </li>
          <li><a href="#"><i class="fa fa-android"></i></a> </li>  
          <li> <a href="#"><i class="fa fa-apple"></i></a> </li>
          <li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li>
          <li> <a href="#"><i class="fa fa-bitbucket-square"></i></a> </li>
          <li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li>
          <li> <a href="#"><i class="fa fa-css3"></i></a> </li>
          <li> <a href="#"><i class="fa fa-dribbble"></i></a></li>
          <li> <a href="#"><i class="fa fa-dropbox"></i></a></li>
          <li> <a href="#"><i class="fa fa-facebook"></i></a></li>
          <li> <a href="#"><i class="fa fa-facebook-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-flickr"></i></a></li>
          <li> <a href="#"><i class="fa fa-foursquare"></i></a></li>
          <li> <a href="#"><i class="fa fa-github"></i></a></li>
          <li> <a href="#"><i class="fa fa-github-alt"></i></a></li>
          <li> <a href="#"><i class="fa fa-github-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-google-plus"></i></a></li>
          <li> <a href="#"><i class="fa fa-google-plus-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-html5"></i></a></li>
          <li> <a href="#"><i class="fa fa-instagram"></i></a></li>
          <li> <a href="#"><i class="fa fa-linkedin"></i></a></li>
          <li> <a href="#"><i class="fa fa-linkedin-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-linux"></i></a></li>
          <li> <a href="#"><i class="fa fa-maxcdn"></i></a></li>
          <li> <a href="#"><i class="fa fa-pagelines"></i></a></li>
          <li> <a href="#"><i class="fa fa-pinterest"></i></a></li>
          <li> <a href="#"><i class="fa fa-pinterest-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-renren"></i></a></li>
          <li> <a href="#"><i class="fa fa-skype"></i></a></li>
          <li> <a href="#"><i class="fa fa-stack-exchange"></i></a></li>
          <li> <a href="#"><i class="fa fa-stack-overflow"></i></a></li>
          <li> <a href="#"><i class="fa fa-trello"></i></a></li>
          <li> <a href="#"><i class="fa fa-tumblr"></i></a></li>
          <li> <a href="#"><i class="fa fa-tumblr-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-twitter"></i></a></li>
          <li> <a href="#"><i class="fa fa-twitter-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-vimeo-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-vk"></i></a></li>
          <li> <a href="#"><i class="fa fa-weibo"></i></a></li>
          <li> <a href="#"><i class="fa fa-windows"></i></a></li>
          <li> <a href="#"><i class="fa fa-xing"></i></a></li>
          <li> <a href="#"><i class="fa fa-xing-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-youtube"></i></a></li>
          <li> <a href="#"><i class="fa fa-youtube-play"></i></a></li>
          <li> <a href="#"><i class="fa fa-youtube-square"></i></a></li>
      
          </ul>


Dovete inserire questo codice dove volete, attenzione queste icone non li dovete mettere tutti per forza, vi ho messo le icone di qualche social network, per inserire il link del vostro profilo social network dovete inserirlo dove c'è "#" cioè href="QUI".


CSS:

Adesso dentro <head> dovete inserire questo

Codice
<link rel="stylesheet" href="ILVOSTROURL/css/style.css">


e mettere url della destinazione dove ci sarà style.css con questo codice:

Codice
/*----- Genral Classes start ------*/


.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}
/*---- Genral classes end -------*/

/*Change icons size here*/
.social-icons .fa {
    font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #FFF;
    color: rgba(255, 255, 255, 0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa{
    border-radius: 50%;
}
.social-icons.icon-rounded .fa{
    border-radius:5px;
}
.social-icons.icon-flat .fa{
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.social-icons .fa-adn{background-color:#504e54;}
.social-icons .fa-apple{background-color:#aeb5c5;}
.social-icons .fa-android{background-color:#A5C63B;}  
.social-icons .fa-bitbucket,.social-icons .fa-bitbucket-square{background-color:#003366;}
.social-icons .fa-bitcoin,.social-icons .fa-btc{background-color:#F7931A;}
.social-icons .fa-css3{background-color:#1572B7;}
.social-icons .fa-dribbble{background-color:#F46899;}  
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}  
.social-icons .fa-flickr{background-color:#FF0084;}
.social-icons .fa-foursquare{background-color:#0086BE;}
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;}
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;}
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;}
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;}
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;}
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;}
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;}
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}


Oppure per fare più veloce nella pagina stessa sempre dentro <head> usare il <style></style> quindi cosi:

Codice
<style>
/*----- Genral Classes start ------*/


.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}
/*---- Genral classes end -------*/

/*Change icons size here*/
.social-icons .fa {
    font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #FFF;
    color: rgba(255, 255, 255, 0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa{
    border-radius: 50%;
}
.social-icons.icon-rounded .fa{
    border-radius:5px;
}
.social-icons.icon-flat .fa{
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.social-icons .fa-adn{background-color:#504e54;}
.social-icons .fa-apple{background-color:#aeb5c5;}
.social-icons .fa-android{background-color:#A5C63B;}  
.social-icons .fa-bitbucket,.social-icons .fa-bitbucket-square{background-color:#003366;}
.social-icons .fa-bitcoin,.social-icons .fa-btc{background-color:#F7931A;}
.social-icons .fa-css3{background-color:#1572B7;}
.social-icons .fa-dribbble{background-color:#F46899;}  
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}  
.social-icons .fa-flickr{background-color:#FF0084;}
.social-icons .fa-foursquare{background-color:#0086BE;}
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;}
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;}
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;}
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;}
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;}
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;}
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;}
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}
</style>


Voi dovete solo metterli in posizione

Alla fine se scegliete css nella stessa pagina cioè con <style></style> viene così:

Codice
<!DOCTYPE html>
<html >
<head>

  <title>Font Awesome Colored - Brand And Social Icons</title>
  
  
  
<link rel='stylesheet prefetch' href='http:////netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

      <style>/*----- Genral Classes start ------*/


.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}
/*---- Genral classes end -------*/

/*Change icons size here*/
.social-icons .fa {
    font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #FFF;
    color: rgba(255, 255, 255, 0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa{
    border-radius: 50%;
}
.social-icons.icon-rounded .fa{
    border-radius:5px;
}
.social-icons.icon-flat .fa{
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.social-icons .fa-adn{background-color:#504e54;}
.social-icons .fa-apple{background-color:#aeb5c5;}
.social-icons .fa-android{background-color:#A5C63B;}  
.social-icons .fa-bitbucket,.social-icons .fa-bitbucket-square{background-color:#003366;}
.social-icons .fa-bitcoin,.social-icons .fa-btc{background-color:#F7931A;}
.social-icons .fa-css3{background-color:#1572B7;}
.social-icons .fa-dribbble{background-color:#F46899;}  
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}  
.social-icons .fa-flickr{background-color:#FF0084;}
.social-icons .fa-foursquare{background-color:#0086BE;}
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;}
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;}
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;}
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;}
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;}
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;}
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;}
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}
</style>

  
</head>

<body>
  
      
                 
          
          <ul class="social-icons icon-circle icon-rotate list-unstyled list-inline">
        
        <li><a href="#"><i class="fa fa-adn"></i></a> </li>
          <li><a href="#"><i class="fa fa-android"></i></a> </li>  
          <li> <a href="#"><i class="fa fa-apple"></i></a> </li>
          <li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li>
          <li> <a href="#"><i class="fa fa-bitbucket-square"></i></a> </li>
          <li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li>
          <li> <a href="#"><i class="fa fa-css3"></i></a> </li>
          <li> <a href="#"><i class="fa fa-dribbble"></i></a></li>
          <li> <a href="#"><i class="fa fa-dropbox"></i></a></li>
          <li> <a href="#"><i class="fa fa-facebook"></i></a></li>
          <li> <a href="#"><i class="fa fa-facebook-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-flickr"></i></a></li>
          <li> <a href="#"><i class="fa fa-foursquare"></i></a></li>
          <li> <a href="#"><i class="fa fa-github"></i></a></li>
          <li> <a href="#"><i class="fa fa-github-alt"></i></a></li>
          <li> <a href="#"><i class="fa fa-github-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-google-plus"></i></a></li>
          <li> <a href="#"><i class="fa fa-google-plus-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-html5"></i></a></li>
          <li> <a href="#"><i class="fa fa-instagram"></i></a></li>
          <li> <a href="#"><i class="fa fa-linkedin"></i></a></li>
          <li> <a href="#"><i class="fa fa-linkedin-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-linux"></i></a></li>
          <li> <a href="#"><i class="fa fa-maxcdn"></i></a></li>
          <li> <a href="#"><i class="fa fa-pagelines"></i></a></li>
          <li> <a href="#"><i class="fa fa-pinterest"></i></a></li>
          <li> <a href="#"><i class="fa fa-pinterest-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-renren"></i></a></li>
          <li> <a href="#"><i class="fa fa-skype"></i></a></li>
          <li> <a href="#"><i class="fa fa-stack-exchange"></i></a></li>
          <li> <a href="#"><i class="fa fa-stack-overflow"></i></a></li>
          <li> <a href="#"><i class="fa fa-trello"></i></a></li>
          <li> <a href="#"><i class="fa fa-tumblr"></i></a></li>
          <li> <a href="#"><i class="fa fa-tumblr-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-twitter"></i></a></li>
          <li> <a href="#"><i class="fa fa-twitter-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-vimeo-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-vk"></i></a></li>
          <li> <a href="#"><i class="fa fa-weibo"></i></a></li>
          <li> <a href="#"><i class="fa fa-windows"></i></a></li>
          <li> <a href="#"><i class="fa fa-xing"></i></a></li>
          <li> <a href="#"><i class="fa fa-xing-square"></i></a></li>
          <li> <a href="#"><i class="fa fa-youtube"></i></a></li>
          <li> <a href="#"><i class="fa fa-youtube-play"></i></a></li>
          <li> <a href="#"><i class="fa fa-youtube-square"></i></a></li>
      
          </ul>
          
      
</body>
</html>


Ecco la demo


Spero che la guida sia abbastanza chiara, se avete problemi chiedete pure qui sui commenti ;)

la fonte è mia

Firma:

Ciao Carò Utente Hai un Problema o una Domanda? bhe allora Contattaci:

Email: info@stertix.it
Skype: Stertix.forum
Facebook: Stertix Forum

EMINEM & RIHANNA
[Immagine: 9vJLLEP.gif][Immagine: AUpdxc9.gif]

Rispondi


(Questo messaggio è stato modificato l'ultima volta il: 19/11/2016 17:52 da Stertix.)
Aggiorna il tuo account per nascondere gli annunci pubblicitari.



Facebook Twitter Linkedin MySpace Technorati Digg

Utente(i) che stanno guardando questa discussione: 1 Ospite(i)



Discussioni correlate...
Discussione: Autore Risposte: Letto: Ultimo messaggio
  Guida [TAG] Imparare Passo per Passo il HTML & CSS Stertix 0 581 04/06/2019 00:49
Ultimo messaggio: Stertix
  [INTRODUZIONE] Imparare Passo per Passo il HTML & CSS Stertix 0 71 04/06/2019 00:38
Ultimo messaggio: Stertix
  Guida Scrivere un'articolo in html con immagine vicino Loois 0 180 14/06/2017 23:40
Ultimo messaggio: Loois
  Guida HTML SEMPLICE CmsOwna 1 304 19/02/2017 19:21
Ultimo messaggio: Kaise Kaskade
  Guida [GUIDA] Capire passo passo l'HTML A-Style 1 924 27/07/2014 13:27
Ultimo messaggio: Hewo ReNext
  Index [Html & CSS] Kralin 3 1,183 12/02/2014 17:52
Ultimo messaggio: Stertix
  [Guida] Cosa sono i codici HTML, come usarli e dove, i principali più usati Ale7070 2 1,130 16/07/2013 19:53
Ultimo messaggio: alessandro150



contatore