Добавьте значок рядом с текстом элемента в <ul>в <nav> - PullRequest
Новая
       9

Добавьте значок рядом с текстом элемента в <ul>в <nav>

0 голосов
/ 07 мая 2020

Как добавить значок рядом с текстом элемента в <ul> в <nav>

http://jsfiddle.net/h96y7sw8/10/

Основной способ c: 

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

Но когда у меня <ul> в <nav>, он больше не работает.

Извините, я попытался использовать фрагмент, но он не работал .

Ответы [ 3 ]

0 голосов
/ 07 мая 2020

Вы имели в виду что-то подобное?

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;
}
0 голосов
/ 07 мая 2020

Нет необходимости в сумасшедших% встроенных стилях, в Materialise они уже есть. Просто добавьте .left к своему значку. 

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

Codepen здесь .

0 голосов
/ 07 мая 2020

Посмотрим, работает ли это! Для выравнивания можно добавить дополнительные 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>
...