Font Awesome Anchors tags not working


#1

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

#2

Hey, if you’re still stuck, kindly share the URL if you don’t mind.


#3

Gilberto Diaz


#4

Here is the solution to your puzzle (see the commented style & line in your main.css)… :tada:


#5

Definitely I needed another pair of eyes. Thank you! :raised_hands:


#6

You bet! :sunglasses:

Happy to help.