CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alluka
Alluka

Reputation: 61

How can I add hyperlinks to the icon in my menu?

Good evening everyone, best regards.

I am developing a web application and I have problems creating the menu

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/

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

Upvotes: 0

Views: 88

Answers (1)

Trevin Avery
Trevin Avery

Reputation: 2919

You can just move the a tag up a level so it contains the title and icon as one block.

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

Upvotes: 1

Related Questions