Wie kann ich meine Social-Media-Symbole mithilfe von Bootstrap verschieben?

Question

Q1

Erstens: Wie kann ich <a href="#" class="fa fa-twitter"></a> und <a href="#" class="fa fa-linkedin"></a> nach unten zu verschieben, ohne den Inhalt im Abschnitt zu beeinflussen 1, so werden die Symbole inline mit der Navigationsleiste Text „Liam Docherty Digital Portfolio“ mit Bootstrap?

Hier ist ein Bild, wie meine Website derzeit aussieht, so dass Sie das aktuelle Problem sehen können.

JSFiddle

<style> 
    body { 
     margin: 0; 
     padding: 0; 
    } 

    .navbar.navbar-default { 
     background-color: #4D5061; 
     height: 10vh; 
     z-index: 100; 
    } 

    .navbar.navbar-default ul { 
     list-style-type: none; 
     text-align: right; 
    } 

    .navbar.navbar-default ul li { 
     display: inline-block; 
    } 

    .dropdown-menu li { 
     text-align: center 
    } 

    .dropdown .dropdown-menu { 
     background-color: #4D5061; 
    } 

    .dropdown .dropdown-menu a { 
     color: white; 
    } 

    .navbar.navbar-default ul li a { 
     display: inline-block; 
     padding: 3.5vh 8px 4px; 
     color: white; 
     text-decoration: none; 
     font-size: 14pt; 
     font-family: 'Roboto', sans-serif; 
    } 

    .navbar.navbar-default ul li:after { 
     content: ''; 
     position: absolute; 
     right: 50%; 
     bottom: 0; 
     left: 50%; 
     height: 3px; 
     background-color: #FFFFFF; 
     border-radius: 9px; 
     transition: all .2s; 
    } 

    .navbar.navbar-default ul li a:hover { 
     color: white; 
     background-color: rgba(20, 50, 40, 0.5) 
    } 

    .nav.navbar-nav, 
    .nav.navbar-nav>li { 
     float: none; 
    } 

    .navbar.navbar-default ul li:hover:after { 
     right: 0; 
     left: 0; 
    } 

    .nav-title { 
     font-size: 14pt; 
     margin: 0; 
     top: 35px; 
     left: 50px; 
     width: 100%; 
     position: absolute; 
     text-align: center; 
     color: white; 
     font-family: 'Roboto', sans-serif; 
    } 

    .navbar.navbar-default ul.dropdown-menu li, 
    .navbar.navbar-default ul.dropdown-menu li a { 
     position: relative; 
     display: block; 
    } 

    #logo { 
     padding-top: 2vh; 
     padding-left: 20px; 
     float: left; 
    } 

    .hero { 
     background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;; 
     background-attachment: fixed; 
     position: relative; 
     background-size: cover; 
     width: 100%; 
     max-width: 100%; 
     width: 100vw; 
     height: 100%; 
    } 

    section { 
     position: relative; 
     padding:10vh 0 0; 
     min-height:100vh; 
    } 

    .section1 { 
     height: 100vh; 
     text-align: center; 
     color: white; 
    } 

    .section2 { 
     background-color: #FFFFFF; 
     text-align: center; 
     color: white; 
     min-height:90vh; 
    } 

    .fa-angle-down { 
     color: #4D5061; 
     position: absolute; 
     bottom: 0px; 
    } 

    .fa-angle-up { 
     color: #4D5061; 
     position: absolute; 
     bottom: 0px; 
    } 

    .icon-style { 
    position: relative; 
    top:20px; 
    } 

    .footer { 
     height: 3vh; 
     background-color: #4D5061; 
     padding: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
    } 

    .footertext { 
     font-size: 14pt; 
     color: white; 
     font-family: 'Roboto', sans-serif; 
     text-align: center; 
    } 

    .profile.box { 
     bottom: 0; 
     height: 50%; 
     left: 0; 
     margin: auto; 
     position: absolute; 
     right: 0; 
     top: 0; 
     width: 50%; 
    } 

    .shape { 
     border-radius: 25px; 
     display: inline-block; 
     background: #4D5061; 
     content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); 
     color: white; 
     height: 250px; 
     margin: auto; 
     padding: 3px; 
     width: 250px; 
    } 

    .shape2 { 
     background: linear-gradient(35deg, #4D5061, #4D5061); 
     border-radius: 85px; 
     color: white; 
     height: 40px; 
     margin: 1% auto; 
     opacity: 0.9; 
     display: inline-block; 
     padding: 0px; 
     width: 250px; 
    } 

    .fa { 
     padding: 20px; 
     font-size: 20px; 
     text-align: center; 
     text-decoration: none; 
     margin: 7px 6px; 
     border-radius: 50%; 
    } 

    .fa:hover { 
     opacity: 0.7; 
    } 

    .fa-twitter { 
     background: #55ACEE; 
     color: white; 
    } 

    .fa-linkedin { 
     background: #007bb5; 
     color: white; 
    } 

    @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); 

    #feedback-page{ 
     text-align:center; 
    } 

    #form-main{ 
     width:100%; 
     float:left; 
     padding-top:0px; 
    } 

    #form-div { 
     background-color:rgba(72,72,72,0.4); 
     padding-left:35px; 
     padding-right:35px; 
     padding-top:35px; 
     padding-bottom:50px; 
     width: 850px; 
     height: 500px; 
     float: left; 
     left: 50%; 
     position: absolute; 
     margin-top:30px; 
     margin-left: -260px; 
     -moz-border-radius: 7px; 
     -webkit-border-radius: 7px; 
    } 
    .feedback-input { 
     color:#3c3c3c; 
     font-family: Helvetica, Arial, sans-serif; 
     font-weight:500; 
     font-size: 18px; 
     border-radius: 0; 
     line-height: 22px; 
     background-color: #fbfbfb; 
     padding: 13px 13px 13px 54px; 
     margin-bottom: 10px; 
     width:100%; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
     box-sizing: border-box; 
     border: 3px solid rgba(0,0,0,0); 
    } 

    .feedback-input:focus { 
     background: #fff; 
     box-shadow: 0; 
     border: 3px solid #3498db; 
     color: #3498db; 
     outline: none; 
     padding: 13px 13px 13px 54px; 
    } 

    .focused{ 
     color:#30aed6; 
     border:#30aed6 solid 3px; 
    } 

    #name { 
     background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); 
     background-size: 30px 30px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    #name:focus { 
     background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); 
     background-size: 30px 30px; 
     background-position: 8px 5px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    #email { 
     background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); 
     background-size: 30px 30px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 


    #email:focus { 
     background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); 
     background-size: 30px 30px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    #comment { 
     background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg); 
     background-size: 30px 30px; 
     background-position: 11px 8px; 
     background-repeat: no-repeat; 
    } 

    textarea { 
     width: 100%; 
     height: 150px; 
     line-height: 150%; 
     resize:vertical; 
    } 


    input:hover, textarea:hover, 
    input:focus, textarea:focus { 
     background-color:white; 
    } 


    #button-blue { 

     font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
     float:left; 
     width: 100%; 
     border: #fbfbfb solid 4px; 
     cursor:pointer; 
     background-color: #3498db; 
     color:white; 
     font-size:24px; 
     padding-top:22px; 
     padding-bottom:22px; 
     -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     transition: all 0.3s; 
     margin-top:-4px; 
     font-weight:700; 
    } 

    #button-blue:hover { 
      background-color: rgba(0,0,0,0); 
      color: #0493bd; 
    } 

    .submit:hover { 
      color: #3498db; 
    } 

    .ease { 
      width: 0px; 
     height: 74px; 
     background-color: #fbfbfb; 
     -webkit-transition: .3s ease; 
     -moz-transition: .3s ease; 
     -o-transition: .3s ease; 
     -ms-transition: .3s ease; 
     transition: .3s ease; 
    } 

    .submit:hover .ease { 
     width:100%; 
     background-color:white; 
    } 

    @media only screen and (max-width: 580px) { 
    #form-div { 
     left: 3%; 
     margin-right: 3%; 
     width: 88%; 
     margin-left: 0; 
     padding-left: 3%; 
     padding-right: 3%; 
    } 
    </style> 

</head> 

<body> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
     <a href="#" class="fa fa-twitter"></a> 
     <a href="#" class="fa fa-linkedin"></a> 
     <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a> 
       </li> 
       <li><a href="#section3">Contact</a> 
       </li> 
       <li><a href="#">Something else here</a> 
       </li> 
       <li><a href="#">Separated link</a> 
       </li> 
       <li><a href="#">One more separated link</a> 
       </li> 
      </ul> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a> 
       </li> 
       <li><a href="#">Another action</a> 
       </li> 
       <li><a href="#">Something else here</a> 
       </li> 

       <li><a href="#">Separated link</a> 
       </li> 

       <li><a href="#">One more separated link</a> 
       </li> 
      </ul> 
      </li> 
      <li><a href="#">Clients</a> 
      </li> 
      <li><a href="#contact-me">Contact Me</a> 
      </li> 
     </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
    </nav> 


    <section id="section1" class="section1"> 
    <div class="hero"> 
     <div class="profile box"> 
     <div class="shape"></div> 
     <div class="shape2"> 
      <p>kjjjjjjjjjkjjjkkjkj</p> 
     </div> 
     </div> 
    </div> 





    <a href="#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a> 

    </section> 
    <section id="contact-me" class="contact_section section2"> 

     <h2 class="contact-text">Contact Me Now!</h2> 
     <div id="form-main"> 
      <div id="form-div"> 
       <form class="form" id="form1"> 
        <p class="name"> 
         <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" /> 
        </p> 
        <p class="email"> 
         <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" /> 
        </p> 
        <p class="text"> 
         <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea> 
        </p> 
        <div class="submit"> 
         <input type="submit" value="SEND" id="button-blue"/> 
         <div class="ease"></div> 
        </div> 
       </form> 
      </div> 

    <a href="#section1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a> 

    </section> 
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <footer> 
    <div class="footer"> 
     <h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2> 
    </div> 
    </footer> 
</body> 
</html> 

Answer 1

Sie können diese zu Ihrem CSS versuchen und hinzuzufügen. Sie können Margin-Top nach Ihren Bedürfnissen anpassen, dies sollte funktionieren, da Sie einfache Links haben.

.navbar-header a.fa-twitter, .navbar-header a.fa-linkedin { 
    display:inline-block; 
    margin-top:5px; 
} 

Answer 2

Die Geige Anzeige ist nicht richtig, so dass ihre hart, zu sagen, aber die folgende CSS auf die .FA Elemente versuchen:

position: relative; 
top: 10px; 

justieren oben, was auch immer funktioniert

Answer 3

Try this:

HTML

<a href="#" class="fa fa-twitter icon-style"></a> 
<a href="#" class="fa fa-linkedin icon-style"></a> 

CSS

.icon-style { 
    position: relative; 
    top:20px; 
}