Question

我使用Bootstrap 4构建我的个人网站。我是CDN Bootstrap和FontAwesome。所有图标都显示在页面中，但不可点击。我<head>中的代码如下......

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

导航栏的结构如下......

<!--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如下......

twitter_username: diazgilberto
github_username: diazgilberto
google_plus_username: +GilbertDiazCasanas
linkedin_username: diazgilberto

两件事：

当我悬停游标时，应该在bootstrap中使用锚标签自动更改，而不是这样做。
点击社交图标

Jekyll Font Awesome anchors标签不起作用

0 个答案: