如何在包含"material-icons“的列表上创建一个超文本链接？

Question

我想开发一个包含图标(材质图标)的浮动栏。不幸的是，我的<a href=>属性不起作用，图标也不可点击。

你知道怎么解决这个问题吗？

​

<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>

​

Answer 1

文本需要在链接内，并且应用于那些links...not 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>

​

Answer 2

通过在<a>中设置图标

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