Cómo agregar el pie de página con los iconos sociales en bootstrap?

Aquí está mi pie de página de la imagen con los iconos sociales. Necesito saber cómo agregar que el uso de bootstrap/css??

Como muestra la imagen. Necesito saber cómo agregar que el uso de bootstrap o css? Cómo diseñar esa separación? Este es mi código para el pie de página.

<footer class="footer">
        <div class="container text-left">
            <small style="color:grey" class="copyright">Copyright &copy 2015 SVAPP Private Limited.All Rights Reserved.</small>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-skype pull-right">  </small></a>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-google-plus pull-right">  </small></a>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-linkedin pull-right">  </small></a>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-twitter pull-right">  </small></a>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-facebook pull-right">  </small></a>
        </div><!--End container-->
    </footer><!--End footer 2-->

La imagen aquí

  • a partir de la cual el sitio web que usted haga de la pantalla ? lipis.github.io/bootstrap-social
  • es de diseño photoshop… necesito de diseño que en la web
  • ¿incluye bootstrap.css y bootstrap-social.css ? <script type=’text/javascript» src=»…… /bootstrap/bootstrap.min.js»></script>
  • sí que he añadido
  • re actualizado mi respuesta, ¿el código de trabajo para usted ?
InformationsquelleAutor Prajwal K M | 2015-11-04

2 Kommentare

  1. 13

    Aquí es una solución de cómo se puede crear esta usando Bootstrap y Fuente impresionante iconos. Bootstrap glyphicons no tiene los iconos sociales de modo que usted puede incluir algunos otros iconos de la fuente.

    CSS:

    .footer {
      background: #061D25;
      padding: 10px 0;
    }
    .footer a {
      color: #70726F;
      font-size: 20px;
      padding: 10px;
      border-right: 1px solid #70726F;
      transition: all .5s ease;
    }
    .footer a:first-child {
      border-left: 1px solid #70726F;
    }
    .footer a:hover {
      color: white;
    }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <footer class="footer">
      <div class="container text-center">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-linkedin"></i></a>
        <a href="#"><i class="fa fa-google-plus"></i></a>
        <a href="#"><i class="fa fa-skype"></i></a>
      </div>
    </footer>

    También puede crear este sin Bootstrap framework de css y será casi el mismo, sólo necesita incluir los iconos de la fuente.

    CSS:

    footer {
      background: #061D25;
      padding: 10px 0;
      text-align: center;
    }
    footer a {
      color: #70726F;
      font-size: 20px;
      padding: 10px;
      border-right: 1px solid #70726F;
      transition: all .5s ease;
    }
    footer a:first-child {
      border-left: 1px solid #70726F;
    }
    footer a:hover {
      color: white;
    }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
    <footer>
      <a href="#"><i class="fa fa-facebook"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
      <a href="#"><i class="fa fa-google-plus"></i></a>
      <a href="#"><i class="fa fa-skype"></i></a>
    </footer>

    • agradable y limpio respuesta !
    • Muchas gracias amigo… funciona como un encanto
    • Me alegro de que me podría ayudar 🙂
    • Hey bro, impresionante! muchas gracias
  2. 1

    buscar en http://lipis.github.io/bootstrap-social/ donde usted puede conseguir los iconos de boostrap.

    ACTUALIZACIÓN 2:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet" >
    
        <body>
           <div class="text-center">
            <a onclick="" class="btn btn-social-icon btn-lg btn-facebook"><i class="fa fa-facebook"></i></a>
            <a onclick="" class="btn btn-social-icon btn-lg btn-dropbox"><i class="fa fa-dropbox"></i></a>
            <a onclick="" class="btn btn-social-icon btn-lg btn-flickr"><i class="fa fa-flickr"></i></a>
            <a onclick="" class="btn btn-social-icon btn-lg btn-pinterest"><i class="fa fa-pinterest"></i></a>
        </div>
    
      </body>
    </html>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea