如何在包含“材料图标"的列表上建立超文本链接? [英] How to make an hypertext link on a list that contains "material-icons"?
本文介绍了如何在包含“材料图标"的列表上建立超文本链接?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想开发一个包含图标(材料图标)的浮动栏.不幸的是,我的<a href=>
属性不起作用,并且图标不可单击.
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>
推荐答案
文本必须在链接内,并且应用于这些链接的类...不是li
.
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>
这篇关于如何在包含“材料图标"的列表上建立超文本链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文