悬停的导航图标

Question

我正在尝试制作一个图标导航栏，该图标在鼠标悬停时也徘徊相同的颜色，我将图标定位得有点偏，但同时我无法将其向右推或消失。

主要目标是将图标放在a href的左侧，右侧填充约3像素，这样就不会碰到文本，并且在导航菜单上，图标悬停与每个导航项的文本相同的颜色。

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>