Question

我正在尝试使用此行显示导航栏项目旁边的图标（向下箭头）

constructor

但没有出现。这是代码。任何帮助表示赞赏。

background: url(ic_keyboard_arrow_down_white_18dp_1x.png) right

Answer 1

为什么不尝试使用字体真棒在<head>标记

中添加此行

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">



<ul id="menu">
  <li class="sub">
  <a href="#">Help <i class="fas fa-arrow-circle-down"></i></a>
    <ul>
      <li><a href="">test1 <i class="fas fa-arrow-circle-down"></i></a></li>
      <li><a href="">test2</a></li>
      <li><a href="">test3</a></li>
    </ul>
  </li>

https://fontawesome.com

Answer 2

我检查了这个问题，如果你摆脱<a>标签上的灰色背景，我的意思是你写的这个样式定义：

ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 9px 18px 9px 18px;

背景：灰色;

  margin-left: 1px;
  white-space: nowrap;
}

你会看到图标。

如果您想要背景颜色，请尝试在图标所在的<li>标签上定义样式，输入...并使用透明背景将图标与背景颜色混合。

示例（STYLE CSS）：

<style>
    ul {
        font-family: Arial, Verdana;
        font-size: 16px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        display: inline-block;
        background-color: gray;
    }

        ul li {
            display: block;
            position: relative;
            float: left;
        }

    li ul {
        display: none;
    }

    ul li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 9px 18px 9px 18px;
        margin-left: 1px;
        white-space: nowrap;
    }

    ul li ul li a:hover, #menu:hover {
        background: #ddd;
    }

    li:hover ul {
        display: block;
        position: absolute;
    }

    li:hover li {
        float: none;
        font-size: 13px;
    }

    ul > li.sub {
        background-color: #ffffff;
        background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_arrow_drop_down_48px-128.png) right center no-repeat;
        background-size: 24px;
    }
</style>

希望这有用。

图标没有显示在使用CSS的导航栏上

2 个答案: