Πώς να δημιουργήσετε: σταθερή κοινωνική στήλη

Μάθετε πώς να χρησιμοποιήσετε το CSS για τη δημιουργία σταθερών/κολλημένων κοινωνικών εικονιδίων στήλης.

Προσπάθησε να το δεις

Πώς να δημιουργήσετε σταθερή κοινωνική στήλη

Πρώτο βήμα - Προσθήκη HTML:

<!-- Χαρακτηρισμός του Font Awesome Ιδεών -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Μπάρα εικονιδίων κοινωνικών μέσων -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
  <a href="#" class="google"><i class="fa fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>

Δεύτερη Βήμα - Προσθέστε CSS:

/* Κάθετη/κολλημένη μπάρα εικονιδίων (υψος στο 50% της οθόνης) */
.icon-bar {
  θέση: στάσιμο;
  υψος: 50%;
  -webkit-μετατροπή: μετακίνησηY(-50%);
  -ms-μετατροπή: μετακίνησηY(-50%);
  μετατροπή: μετακίνησηY(-50%);
}
/* Ρυθμίστε τα στυλ για τα δεσμεύματα της μπάρας εικονιδίων */
.icon-bar a {
  παρουσίαση: κείμενο;
  υποκείμενη σειρά κειμένου: κέντρο;
  απόσταση πλήρους: 16px;
  μεταβλητή μετάβασης: όλα 0.3s ευκολία;
  χρώμα: λευκό;
  πλάτος γραμματοσειράς: 20px;
}
/* Αν χρειάζεται, ρυθμίστε τις στυλ χρώματος για τα εικονίδια κοινωνικών μέσων */
.icon-bar a:hover {
  βάθος χρώματος: #000;
}
.facebook {
  βάθος χρώματος: #3B5998;
  χρώμα: λευκό;
}
.twitter {
  βάθος χρώματος: #55ACEE;
  χρώμα: λευκό;
}
.google {
  βάθος χρώματος: #dd4b39;
  χρώμα: λευκό;
}
.linkedin {
  βάθος χρώματος: #007bb5;
  χρώμα: λευκό;
}
.youtube {
  βάθος χρώματος: #bb0000;
  χρώμα: λευκό;
}

Προσπάθησε να το δεις

Σχετικές σελίδες

Οδηγίες:CSS τοποθέτηση