如何将超链接添加到菜单中的图标？

Question

Good evening everyone, best regards. 大家晚上好，最诚挚的问候。

I am developing a web application and I have problems creating the menu 我正在开发Web应用程序，但是创建菜单时遇到问题

I want to add hyperlinks to the images for when the user clicks on both the menu item title and the images, they can be redirected to the section 我想向图像添加超链接，以便当用户单击菜单项标题和图像两者时，可以将它们重定向到该部分

Example in the first item I have a section called stackoverflow I could only add Hyperlinks to the title but I also want to click on the image to redirect to the "stackoverflow" section/ 在第一项的示例中，我有一个称为stackoverflow的部分，我只能在标题中添加超链接，但我也想单击图像以重定向到“ stackoverflow”部分/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!doctype html> <head> <meta charset="utf-8"> <title>Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <h1>Administrator</h1> <br> <div class="container"> <div class="row text-center mb-5"> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3"> <a href="https://stackoverflow.com/">StackOverflow</a> </div> <div> <i class="fas fa-city fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Pagos</div> <div> <i class="far fa-credit-card fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Contabilidad</div> <div> <i class="fas fa-hand-holding-usd fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Reportar</div> <div> <i class="fas fa-exclamation-triangle fa-3x"></i> </div> </div> </div> <div class="row text-center"> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Morosos</div> <div> <i class="fas fa-user-times fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Instalaciones</div> <div> <i class="fas fa-swimmer fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Contabilidad</div> <div> <i class="fas fa-hand-holding-usd fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Reportar</div> <div> <i class="fas fa-exclamation-triangle fa-3x"></i> </div> </div> </div> </div> <!-- Add your site or application content here --> <script src="https://kit.fontawesome.com/55c228f8f9.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> </body> </html>

Answer 1

You can just move the a tag up a level so it contains the title and icon as one block. 你可以只移动a标签上升了一个层次，因此包含了标题和图标作为一个块。

<a href="https://stackoverflow.com/">
    <div class="bg-dark text-white rounded-sm mb-3">
        StackOverflow
    </div>
    <div>
        <i class="fas fa-city fa-3x"></i>
    </div>
</a>

Or you could duplicate the link if you don't want the entire think to be a link for some reason. 或者，如果您出于某种原因不希望整个想法都成为链接，则可以复制该链接。

<div class="bg-dark text-white rounded-sm mb-3">
    <a href="https://stackoverflow.com/">StackOverflow</a>
</div>
<div>
    <a href="https://stackoverflow.com/"><i class="fas fa-city fa-3x"></i></a>
</div>

Here's a snippet of the first solution. 这是第一个解决方案的摘要。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!doctype html> <head> <meta charset="utf-8"> <title>Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <h1>Administrator</h1> <br> <div class="container"> <div class="row text-center mb-5"> <div class="col-sm-3"> <a href="https://stackoverflow.com/"> <div class="bg-dark text-white rounded-sm mb-3"> StackOverflow </div> <div> <i class="fas fa-city fa-3x"></i> </div> </a> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Pagos</div> <div> <i class="far fa-credit-card fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Contabilidad</div> <div> <i class="fas fa-hand-holding-usd fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Reportar</div> <div> <i class="fas fa-exclamation-triangle fa-3x"></i> </div> </div> </div> <div class="row text-center"> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Morosos</div> <div> <i class="fas fa-user-times fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Instalaciones</div> <div> <i class="fas fa-swimmer fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Contabilidad</div> <div> <i class="fas fa-hand-holding-usd fa-3x"></i> </div> </div> <div class="col-sm-3"> <div class="bg-dark text-white rounded-sm mb-3">Reportar</div> <div> <i class="fas fa-exclamation-triangle fa-3x"></i> </div> </div> </div> </div> <!-- Add your site or application content here --> <script src="https://kit.fontawesome.com/55c228f8f9.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> </body> </html>

如何将超链接添加到菜单中的图标？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-07-27 21:45:15

如何将超链接添加到菜单中的图标？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-07-27 21:45:15

解决方案1
1 已采纳 2019-07-27 21:45:15