+

Social Icons






Social Icons facilitates to use different soical media links in your web footer and sometimes at header. PixelzUI provides twenty-nine classes.
Each input field has common .smi class. Classes start from .smi-a to .smi-z for social icons' sizing. However, .smi-srnd & .smi-rnd are used for styling.

=>We have set black background & border of icons and you can change it on your choice.

Types

Following are the three types of social icons.

  1. Square
  2. Semi-rounded
  3. Rounded
=>Other types are based on size(s) and background & border color class(es)..

Classes

Following are the classes to use social Icons in your scripts.

  1. .smi
  2. .smi-srnd
  3. .smi-rnd
  4. .smi-a
  5. .smi-b
  6. .smi-c
  7. .smi-d
  8. .smi-e
  9. .smi-f
  10. .smi-g
  11. .smi-h
  12. .smi-i
  13. .smi-j
  14. .smi-k
  15. .smi-l
  16. .smi-m
  17. .smi-n
  18. .smi-o
  19. .smi-p
  20. .smi-q
  21. .smi-r
  22. .smi-s
  23. .smi-t
  24. .smi-u
  25. .smi-v
  26. .smi-w
  27. .smi-x
  28. .smi-y
  29. .smi-z
.
=>Other classes are based on background & border color class(es)..

How to use

  1. Add .smi as class attribute in <a>.
  2. <a class="smi"></a>
  3. Add .smi-* as an extra class attribute in <a> for sizing.
  4. <a class="smi smi-*"></a>
  5. Add .smi-# as an extra class attribute in <a> for styling.
  6. <a class="smi smi-* smi-#"></a>
  7. Add background & border color class(es) as extra class attributes in <a>.
  8. <a class="smi smi-* smi-# bg-bk br-wt"></a>
  9. Finally, add fontawesome classes for media icons like .fa fa-facebook in <a>.
  10. <a class="smi smi-* smi-# bg-bk br-wt fa fa-facebook"></a>
=>* means (a - z).

=># means (srnd & rnd).

Demo

Square Social Icons





















































Semi-rounded Social Icons





















































Rounded Social Icons





















































Editing

Edit Classes







<a href="#" class="smi smi-srnd smi-s bg-bk br-bl fa fa-facebook"></a> <a href="#" class="smi smi-srnd smi-s bg-bk br-bl fa fa-twitter"></a> <a href="#" class="smi smi-srnd smi-s bg-bk br-bl fa fa-google"></a> <a href="#" class="smi smi-srnd smi-s bg-bk br-bl fa fa-linkedin"></a> <a href="#" class="smi smi-srnd smi-s bg-bk br-bl fa fa-pinterest"></a> <a href="#" class="smi smi-srnd smi-s bg-bk br-bl fa fa-dribbble"></a>

Leave a Reply

Your email address will not be published. Required fields are marked.