可悬停的导航图标

Question

我正在尝试做一个图标导航栏，在悬停时，图标也悬停在相同的颜色上，我的图标已经定位，但同时我不能将它推到右边或者它消失了。

主要目标几乎是将图标放在 a href 的左侧，右侧有大约 3px 的填充，因此它不会触及文本，并且在导航菜单悬停时，图标悬停在与每个文本相同的颜色导航项。

HTML

  <nav class="fixed-nav-bar">
    <div id="menu" class="menu">
      <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
      <ul class="menu-items">
        <li><div class="fa-icon-home"></div><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li>
        <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li>
        <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li>
        <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li>
      </ul>
    </div>
  </nav>

CSS：

.fa-icon-home {
    background-image: url('../img/home.png');
    background-repeat: no-repeat;
    height: 22px;
    position: relative;
    top: 15px;
    right: 10px;
}
.fixed-nav-bar {
    position: fixed;
    width: 100%;
    background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
    line-height: 70px;
    width: 100px;
    max-width: 120px;
}
.menu {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.menu a, .menu a:visited {
    color: #ffffff;
    overflow: hidden;
    font-size: 20px;
}
.menu a:hover, .menu a:target {
    display: block;
    color: #72BCD4;
}
.menu-items {
    display: inline-block;
}
.menu-items li {
    display: inline-block;
    border-top: 2px solid transparent;
}
.menu-items a {
    text-decoration: none;
    display: block; /* New Line */
}
.menu-items li:hover {
    border-top: 2px solid #72BCD4;
}
.show, .hide {
    display: none;
    padding-left: 15px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center left;
    color: #dde1e2;
}
.show {
    background-image: url(../assets/down-arrow-icon.png);
}
.hide {
    background-image: url(../assets/up-arrow-icon.png);
}

Answer 1

我更改了图标的应用方式，现在使用a:before。

.menu-items li {
  position: relative;
}

.menu-items li:nth-child(1) a:before {
  font-family: FontAwesome;
  color: white;
  content: "\f015";
  position: absolute;
  top: 0;
  left: -.5em;
}

.fixed-nav-bar {
  position: fixed;
  width: 100%;
  background-color: #3f3f3f;
}

.fixed-nav-bar li,
.fixed-nav-bar a {
  line-height: 70px;
  width: 100px;
  max-width: 120px;
}

.menu {
  width: 90%;
  max-width: 960 px;
  margin: 0 auto;
  text-align: center;
}

.menu a,
.menu a:visited {
  color: #ffffff;
  overflow: hidden;
  font-size: 20px;
}

.menu a:hover,
.menu a:target {
  display: block;
  color: #72BCD4;
}

.menu-items li {
  display: inline-block;
  border-top: 2px solid transparent;
}

.menu-items a {
  text-decoration: none;
  display: block;
}

.menu-items li:hover {
  border-top: 2px solid #72BCD4;
}

.menu-items li:hover a:before {
color: #72BCD4;
}

.show,
.hide {
  display: none;
  padding-left: 15px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center left;
  color: #dde1e2;
}

.show {
  background-image: url(../assets/down-arrow-icon.png);
}

.hide {
  background-image: url(../assets/up-arrow-icon.png);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="fixed-nav-bar">
  <div id="menu" class="menu">
    <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
    <ul class="menu-items">
      <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li>
    </ul>
  </div>
</nav>

Answer 2

在这里，更改了一些 CSS 规则，然后开始：

.fixed-nav-bar {
  position: fixed;
  width: 100%;
  background-color: #3f3f3f;
}

.fixed-nav-bar li, .fixed-nav-bar a {
  line-height: 70px;
  width: 100px;
  max-width: 120px;
}

.menu {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.menu a, .menu a:visited {
  color: #ffffff;
  overflow: hidden;
  font-size: 20px;
}

.menu a:hover, .menu a:target {
  display: block;
  color: #72BCD4;
}
.fixed-nav-bar .fa-home:hover {
  color: #72BCD4;
}

.menu-items {
  display: inline-block;
}

.menu-items li {
  display: inline-block;
  border-top: 2px solid transparent;
}
.menu-items a {
  text-decoration: none;
  display: block; /* New Line */
}

.menu-items li:hover {
  border-top: 2px solid #72BCD4;
}

.show, .hide {
  display: none;
  padding-left: 15px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center left;
  color: #dde1e2;
}
.show {
  background-image: url(../assets/down-arrow-icon.png);
}
.hide {
  background-image: url(../assets/up-arrow-icon.png);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<nav class="fixed-nav-bar">
  <div id="menu" class="menu">
    <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
    <ul class="menu-items">
      <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li>
    </ul>
  </div>
</nav>