Bootstrap Snippet footer social icon using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
        <div class="bigpixi-footer-social">
      <ul>
          <li class="bigpixi-footer-social__list-item">
            <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://twitter.com/">
              <img class="bigpixi-footer-social__icon" alt="Twitter" title="Twitter" src="http://simpleicons.org/icons/twitter.svg">
</a>          </li>
          <li class="bigpixi-footer-social__list-item">
            <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.facebook.com/">
              <img class="bigpixi-footer-social__icon" alt="Facebook" title="Facebook" src="http://simpleicons.org/icons/facebook.svg">
</a>          </li>
          <li class="bigpixi-footer-social__list-item">
            <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.youtube.com/">
              <img class="bigpixi-footer-social__icon" alt="YouTube" title="YouTube" src="http://simpleicons.org/icons/youtube.svg">
</a>          </li>
          <li class="bigpixi-footer-social__list-item">
            <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.instagram.com/">
              <img class="bigpixi-footer-social__icon" alt="Instagram" title="Instagram" src="http://simpleicons.org/icons/instagram.svg">
</a>          </li>
          <li class="bigpixi-footer-social__list-item">
            <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.pinterest.com/">
              <img class="bigpixi-footer-social__icon" alt="Pinterest" title="Pinterest" src="http://simpleicons.org/icons/pinterest.svg">
</a>          </li>
      </ul>
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.bigpixi-footer-social {
    margin-left: auto;
    margin-top: 8px;
}
.bigpixi-footer-social__list-item {
    display: inline-block;
    margin-left: 16px;
}
.bigpixi-footer__icon-link {
    display: inline-block;
    -webkit-transition: 0.1s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: 0.1s cubic-bezier(0.39, 0.575, 0.565, 1);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
}
.bigpixi-footer-social__icon {
    display: inline-block;
    height: 32px;
    width: 32px;
}
.bigpixi-footer-social__icon:hover {
    display: inline-block;
    height: 32px;
    width: 32px;
    border: 1px solid #e2e2e2;
    padding: 2px;
    transition : .2s;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"footer social icon"
Bootstrap 3.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"footer social icon" Bootstrap 3.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"footer social icon"
Bootstrap 3.0.0 Snippet by jeevan123456