时间戳

首页 > 解决方案 > 如何为菜单中的图标添加超链接？

html - 如何为菜单中的图标添加超链接？

问题描述

大家晚上好，最好的问候。

我正在开发一个 Web 应用程序，但在创建菜单时遇到问题

我想为图像添加超链接，以便用户单击菜单项标题和图像时，可以将它们重定向到该部分

第一项中的示例我有一个名为 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>

标签： htmlcsstwitter-bootstrap

解决方案

您可以将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>

或者，如果您出于某种原因不希望整个想法成为链接，则可以复制该链接。

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

这是第一个解决方案的片段。

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

推荐阅读