How to make an hypertext link on a list that contains "material-icons"?

Question

I want to develop a floating bar that contains icons (material-icons). Unfortunately, my <a href=> attribute doesn't work and the icons are not clickable.

Any idea how to solve this?

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul id="navigation">
  <li class="material-icons md-48 md-dark">video_library
    <a href="https://www.google.com"></a>
  </li>
  <li class="material-icons md-48 md-dark">contact_support
    <a href="https://www.google.com" target="_blank"></a>
  </li>
  <li class="material-icons md-48 md-dark">mail
    <a href="https://www.google.com" target="_blank"></a>
  </li>
</ul>

@Eldar There is no `i` element in this library..see the original code. — Paulie_D, Nov 21 '19 at 11:36

score 2 · Answer 1 · answered Nov 21 '19 at 11:16

The text needs to be inside the link and the classes applied to those links...not the li.

li {
  list-style: none;
  display: inline;
}

a {
  text-decoration: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul id="navigation">
  <li>
    <a href="https://www.google.com" class="material-icons md-48 md-dark">video_library</a>
  </li>
  <li>
    <a href="https://www.google.com" target="_blank" class="material-icons md-48 md-dark">contact_support</a>
  </li>
  <li>
    <a href="https://www.google.com" target="_blank" class="material-icons md-48 md-dark">mail</a>
  </li>
</ul>

score 0 · Answer 2 · answered Nov 21 '19 at 11:21

0

By setting icon inside <a>

 <li>video_library
        <a href="https://www.google.com"><i class="material-icons md-48 md-dark">video_library</i></a>
    </li>

answered Nov 21 '19 at 11:21

Awais

4,752
4
17
40

How to make an hypertext link on a list that contains "material-icons"?

2 Answers2

Linked