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 Comentarios

  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>

Dejar respuesta

Please enter your comment!
Please enter your name here