在 <nav> 中的 <ul> 中的项目文本旁边添加一个图标

Question

如何在 <nav>

中的 <ul> 中的项目文本旁边添加图标

基本的方法是：

<li><a href="layout/pages/index.html"><i class="material-icons">shopping_cart</i>Test</a></li>

但是当我在 <nav> 中有 <ul> 时，它不再起作用了。

抱歉，我尝试使用该代码段，但没有成功。

Answer 1

看看这是否可行！为了对齐，您可以添加额外的 CSS.

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <nav>
        <ul id="slide-out" class="side-nav">
            <li><a href="layout/pages/index.html"><span>Test <i class="material-icons md-24">face</i></span></a></li>
        </ul>
        <a href="javascript:void(0)" data-activates="slide-out" class="button-collapse">
            <i class="material-icons" style="margin-left: 35%;">menu</i>
        </a>
    </nav>
</body>
</html>

Answer 2

你的意思是这样的吗？

http://jsfiddle.net/s34z0dun/

HTML:

 <li><a href="layout/pages/index.html">Test</a> <i class="material-icons">shopping_cart</i></li>

CSS:

.side-nav a {
display:inline;
}
.side-nav i.material-icons{
  color:black;
  display:inline-block;
  position:relative;
  left: -25px;
  top: 8px;
}

Answer 3

不需要疯狂的 % 内联样式，Materialise 已经涵盖了它。只需将 .left 添加到您的图标即可。

<li>
   <a href="layout/pages/index.html"><i class="material-icon left">shopping_cart</i>Test</a>
</li>

Codepen here.

在 <nav> 中的 <ul> 中的项目文本旁边添加一个图标

Add an icon next to item text in <ul> in <nav>

javascript

materialize

material-design