如何在腳本中添加社交圖標的頁腳？

這是我的社會圖標的頁腳圖像。我需要知道如何添加使用bootstrap/css？如何在腳本中添加社交圖標的頁腳？

如圖所示。我需要知道如何添加使用bootstrap或css？如何設計這種分離？這是我的頁腳代碼。

<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-->

Image here

來源

2015-11-04 Prajwal K M

從哪個網站，你讓畫面？ http://lipis.github.io/bootstrap-social/ – AlainIb

它是photoshop設計...我需要設計在網絡 –

你包括bootstrap.css和bootstrap-social.css嗎？ – AlainIb

這裏是一個解決方案如何使用引導和Font awesome圖標創建此。 Bootstrap glyphicons沒有社交圖標，所以你可以包含一些其他圖標字體。

.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; 
 
}

<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>

您還可以創建這個沒有引導框架和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; 
 
}

<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>

來源

2015-11-04 09:26:44

不錯，乾淨的答案！ – AlainIb

非常感謝朋友......它的作品很有魅力 –

我很高興我可以幫助:) –

看在http://lipis.github.io/bootstrap-social/在那裏你可以得到圖標的自舉。

更新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>

來源

2015-11-04 09:04:02 AlainIb

如何在腳本中添加社交圖標的頁腳？

回答

相關問題