html - <a href> 和很棒的字体-6ren

html - 和很棒的字体

转载作者：行者123 更新时间：2023-11-27 23:07:59

一切正常，但我只能点击图标底部的链接。如果我继续它的中间，则不会出现在有链接时出现的那只手。 (我不知道如何解释我的情况，希望你能理解)

所以基本上只适用于图标的底部。 (它的一小部分)。我怎样才能解决这个问题？ (使用 HTML 和 CSS，而不是 jQuery)

这是我的代码:

header {
  background: #111111;
  width: 100%;
  font-weight: 400;
  position: absolute;
  top: 0;
}


/*Navigation Start*/

#bara-wrap {
  max-width: 1040px;
  margin: 0 auto;
}

body {
  background: #000;
}

#social {
  float: right;
  width: 11%;
}

ul.social {
  display: inline-block;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 100%;
}

li.x1 {
  display: inline;
  color: #fff;
  padding: 0 2em;
}

a.x1 {
  color: #fff;
  text-decoration: none;
  font-size: 2.5rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<body>
<header>
  <div id="bara-wrap">
    <nav id="social">
      <ul class="social">
        <li class="x1"><a href="https://www.facebook.com" target="_blank" title="Facebook Page" class="x1"><i class="fab fa-facebook-f"></i></a></li>
        <li class="x1"><a href="mailto:xt@xu.com?ccy@y.com" title="Contact me!" class="x1"><i class="far fa-envelope"></i></a></li>
      </ul>
    </nav>
  </div>
</header>
</body>

最佳答案

好吧，在调试你的 CSS 之后你有两个错误:

当您使用 <i> 调用 FontAwesome 图标时, 记住不要更改默认 class .例如:fa fa-envelope fa初始化 font-family和 fa-envelope初始化 content图标编号。
其次，当您想使用 transorm:translate(-50%,-50%) 使绝对元素居中时，您必须将左侧位置添加到元素 left:50% .

除此之外，一切都很好。

header {
    background: #111111;
    width: 100%;
    font-weight: 400;
    position: absolute;
    top: 0;
    height:200px
}

/*Navigation Start*/

#bara-wrap {
    max-width:1040px;
    margin: 0 auto;
}

ul.social {
    display: inline-block;
    text-align: center;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 100%;
    left: 50%;
}

li.x1 {
    display: inline;
    color: #fff;
    padding: 0 2em;
}

a.x1 {
    color: #fff;
    text-decoration: none;
    font-size: 2.5rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div id="bara-wrap">
<nav id="social">
                    <ul class="social">
                        <li class="x1"><a href="https://www.facebook.com" target="_blank" title="Facebook Page" class="x1"><i class="fa fa-facebook-f"></i></a></li>
                        <li class="x1"><a href="mailto:xt@xu.com?ccy@y.com" title="Contact me!" class="x1"><i class="fa fa-envelope"></i></a></li>
                    </ul>
                </nav>
               </div>
               </header>