Sunday, August 9, 2015

Bootstrap Tutorial For Beginners 11 - Get Started with Font Awesome and ...







<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, 
         initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the 
         head; any other head content must come 
         *after* these tags -->
      <title>EasyOnlineConverter</title>
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/custom.css" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
   </head>
   <body>
      <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container">
            <button type="button" class="navbar-toggle" 
               data-toggle="collapse"
               data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="www.EasyOnlineConverter.com">ProgrammingKnowledge</a>
            <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav navbar-right">
                  <li class="active"><a href="#" > Home </a></li>
                  <li><a href="#">About</a></li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" 
                        data-toggle="dropdown">
                        Learn <b 
                           class="caret"></b>
                        <ul class="dropdown-menu">
                           <li class="dropdown-header">Examples</li>
                           <li>
                     <a href="#">C++</a></li>
                     <li><a href="#">Java</a></li>
                     <li class="divider"></li>
                     <li class="dropdown-header">Tutorials</li>
                     <li><a href="#">C++</a></li>
                     <li><a href="#">Java</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <div class="container">
         <div class="jumbotron text-center">
            <h1>Hello World !!!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
               Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
               Pellentesque mattis justo vel augue pretium euismod. Interdum 
               et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
               turpis eros.
            </p>
            <button type=button class="btn btn-primary">Click me</button>
            <button type=button class="btn btn-success"> thank you</button>
         </div>
         <div class="row">
            <div class="col-sm-4">
               <a href="#" class="thumbnail" >
               <img src="img/cpp.jpg" alt="C++ tutorial">
               </a>
               <h3>C++</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
                  Pellentesque mattis justo vel augue pretium euismod. Interdum 
                  et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
                  turpis eros.
               </p>
               <button type=button class="btn btn-danger"> thank you</button>
            </div>
            <div class="col-sm-4">
               <a href="#" class="thumbnail" >
               <img src="img/java.jpg" alt="Java tutorial">
               </a>
               <h3>Java</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
                  Pellentesque mattis justo vel augue pretium euismod. Interdum 
                  et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
                  turpis eros.
               </p>
               <button type=button class="btn btn-danger"> thank you</button>
            </div>
            <div class="col-sm-4">
               <a href="#" class="thumbnail" >
               <img src="img/python.jpg" alt="Python tutorial">
               </a>
               <h3>Python</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
                  Pellentesque mattis justo vel augue pretium euismod. Interdum 
                  et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
                  turpis eros.
               </p>
               <button type=button class="btn btn-danger"> thank you</button>
            </div>
         </div>
      </div>
      <!-- Fixed footer -->
      <div class="navbar navbar-inverse navbar-fixed-bottom">
         <div class="container">
            <div class="navbar-text pull-left">
               <p>copyright ProgrammingKnowledge 2015</p>
            </div>
            <div class="navbar-text pull-right">    
               <a href="#" ><i class="fa fa-facebook fa-2x"></i></a>
               <a href="#" ><i class="fa fa-twitter fa-2x"></i></a>
               <a href="#" ><i class="fa fa-google-plus fa-2x"></i></a>
            </div>
         </div>
      </div>
      <!-- jQuery (necessary for Bootstrap's JavaScript 
         plugins) -->
      <script src="
         https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include 
         individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>














Charming social media icons with Font Awesome and CSS3

Font Awesome Colored - Brand And Social Icon

Social Buttons for Bootstrap

Searches related to Font Awesome & Social Icons

font awesome social icons example

font awesome icons download

font awesome icons code

how to use font awesome icons

font awesome icons not showing

font awesome icons wordpress

font awesome icons color change

font awesome icons png

No comments:

Post a Comment