I’m using Bootstrap 4 to build my personal website. I’m CDN Bootstrap and FontAwesome in my head as follow…
<head>
<meta charset="UTF-8">
<!--Bootstrap CSS-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{site.baseurl}}/css/main.css">
<title>Gilberto Diaz</title>
</head>
The structure of the navbar is as follow…
<!--Navbar Image & Social Icons-->
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<a class="navbar-brand" href="{{site.baseurl}}"><img class="img-fluid" src="{{site.baseurl}}/images/profile_img_bw.png"
alt="Gilberto Diaz Profile Picture"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="brand-text" href="{{site.baseurl}}">Gilberto Diaz <span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="nav-link" href="mailto:{{site.author.email}}?subject=feedback" title="Email me">
<i class="fa fa-envelope"></i>
</a>
<a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}" title="Twitter">
<i class="fa fa-twitter-square"></i>
</a>
<a class="nav-link" href="https://www.linkedin.com/in/{{ site.linkedin_username }}" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a>
</div>
</nav>
<!--End of Navbar Image & Social Icons-->
_config.yml is as follow…
twitter_username: diazgilberto
github_username: diazgilberto
google_plus_username: +GilbertDiazCasanas
linkedin_username: diazgilberto
Two things:
- cursor should change with anchor tags in bootstrap
- nothing happens when you click in the social icon
