What is the best way to incorporate a link to a fontawesome icon along with text beneath it?

I have designed the following:

        <div style="margin-top: 1.2em">
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
        </div>

Seeking guidance on how I can enable clicking on any of these icons or words below them to redirect me to a link.

I want the icons to be displayed as follows:

 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx

  Home       Admin     Setting

When clicking anywhere from the top of the icon to the bottom of the words, it should behave as if clicking on:

 <a href="/home">Home</a>
 <a href="/admin">Admin</a>
 <a href="/setting">Setting</a>

This is where assistance may be needed using DIVs. The previous solutions tried resulted in vertical alignment of icons. Additionally, the second solution involving multiple hrefs for the same link might not be ideal. Looking for an alternative approach. Any suggestions are welcome.

htmlcsstwitter-bootstrapfonts

Answer №1

No need for divs here. You can achieve the desired layout with something like this. Check out the fiddle

<a href="/home" class="icon-block">
    <i class="icon-home icon-4x"></i>
    <span>Home</span>
</a>
<a href="/admin" class="icon-block">
    <i class="icon-th icon-4x"></i>
    <span>Admin</span>
</a>
<a href="/settings" class="icon-block">
    <i class="icon-cog icon-4x"></i>
    <span>Settings</span>
</a>

CSS

a.icon-block {
        display:inline-block;
        width:10em;
        float:left;
        text-align:center;
    }

    a.icon-block i,
    a.icon-block span {
        display:block;
        width:100%;
        clear:both;
    }

Answer №2

Consider this solution:

<div style="margin-top: 1.2em">
    <a href="/home">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
        <br />
        <span class="normal">Home</span>
    </a>
    <a href="/admin">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
        <br />
        <span class="normal">Admin</span>
    </a>
    <a href="/setting">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
        <br />
        <span class="normal">Setting</span>
    </a>
</div>

To customize the font for the .normal class, update your css like so:

.normal{
    font-family: "Your Font";
}

Answer №3

Experience this personalized Div version.

<div style="margin-top: 1.2em">
    <div class="go-inline">
        <div>
            <a href="/home">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/home">
                <span class="normal">Check out Home</span>
            </a>
        </div>
    </div>
    <div class="go-inline">
        <div>
            <a href="/admin">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/admin">
               <span class="normal">Browse Admin Options</span>
            </a>
        </div>
    </div>
    <div class="go-inline">
        <div>
            <a href="/setting">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/setting">
                <span class="normal">Adjust Settings</span>
            </a>
        </div>
    </div>
</div>

and utilize the following CSS class definitions:

go-middle{ text-align:center;}
go-inline { display:inline-block; vertical-align:top;}

Please feel free to customize the css/div structure as desired. Create it in a way that resonates with your unique style. =D

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JQuery not updating the visibility of elements with the "d-none" class when switching to another tab

Currently, I am attempting to conceal a specific section of my webpage in order to display a "loading" spinner. I achieve this by employing jQuery to add the class "d-none" and remove the class "d-none" from the desired element that needs to be hidden or s ...

javascriptjqueryhtmlbootstrap-4

Tips for presenting dummy content in an Angular application with HTML

I have created a mock service file and I would like to display it in my HTML, but I'm not quite sure how to make it display correctly. Any help or suggestions would be greatly appreciated. <div class="container2"> <div class=" ...

htmlangulartypescriptmockingdisplay

The challenge of maintaining scope in AngularJS Bootstrap Modals

In my application, I am using ngRoute to load a template that includes a bootstrap modal dialog. The purpose of this modal is to prompt the user if they are sure about losing their changes when trying to leave the row they are currently editing in a table. ...

javascriptjqueryangularjstwitter-bootstrap

The Power of Bootstrap and Jquery Unleashed through Ajax Button

Apologies for the confusion in my previous explanation, let me clarify my question. I have a table row with a button, and when the user clicks on it, an ajax call is made to a web service. Upon successful completion of the call, I want to change the text d ...

jqueryajaxtwitter-bootstrap

AngularJS - displaying a notification when the array length is empty and customizing the visibility to conceal the default action

I've been working on an Angular project where I display a loading circle that disappears once the content is loaded. This circle is simply a CSS class that I call from my HTML only when the page first loads, like this: Actually, the circle consists o ...

javascriptcssangularjs

Designing Your WordPress Website's Header Structure

When working on my non-WP sites, I usually handle columns using Bootstrap. However, this is my first time delving into CSS positioning without it. I am trying to align my site header elements similar to the image shown, where the text elements are flush ri ...

htmlcsswordpressresponsive-design

Is it possible to specify a preferred language for the spellchecker in HTML code?

After attempting to use both <html lang="de-DE"> and <textarea lang="de-DE"> in Chrome without any luck. I am wondering if there is a way to indicate a preferred language within an HTML textarea today? ...

htmlgoogle-chromespell-checking

Issues with functionality in VueJS - v-if and v-show are not functioning as expected

In the Vue DIV, there is a structure like this: <div class="row"> <div class="well chart-container"> <div id="chart" v-if="chartShown"></div> <h1 v-if="textShow ...

javascripthtmlvue.jsvuejs2

Tips on how to remove the first column from a jQuery hover effect

Currently, I have a function that enables hover events on a table. Right now, it excludes the header row but I also need it to exclude the first column. Any suggestions on how to do this? $(".GridViewStyle > tbody > tr:not(:has(table, th))") ...

javascriptjqueryhtml

Ensure that the logo/header remains fixed at the top of the page at all

Currently, I am facing an issue with keeping my logo/header at the top of the page. I have experimented with CSS properties like position: fixed; z-index: 9999; top: 0; left: 0;, and even tried adjusting the positioning to left: 40%; in an attempt to cente ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

transferring information from an online submission to a mysql data repository

My registration form isn't saving input data to my database. Here is the code: The initial PHP code can be found in the HTML file containing the form, while the final PHP code is in registrationUpload.php. <?php include ('registrationUploa ...

phphtmldatabase

How can I assign a unique background color to each individual column within a RadioButtonList?

I have an issue with setting 3 repeated columns. I want to assign different background colors to each of them. If you have any ideas on how I can achieve this, please share. Here is the code for my RadioButtonList: <asp:RadioButtonList ID="rblTimeSlot ...

javascriptc#asp.netcssradiobuttonlist

Time to send our changes up to the repository with a quick `

I've been attempting to push my files into git, but I'm facing some issues. Here are the steps I've taken so far: git init git add . git commit -m "Start" git remote add origin <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascripthtmlnode.jsgitgithub

React Error - The function 'deleteNinja' has not been declared and is undefined

I'm encountering an issue in Ninja.js where I am trying to delete state data by the Id passed as a prop. The error message I'm receiving is: Failed to compile src\Ninjas.js Line 11:41: 'deleteNinja' is not defined no-undef I&a ...

javascripthtmlreactjs

Struggling with implementing click events on Ionic-Calendar 2?

Attempting to implement a (click) event for ionic-calendar 2 where it deactivates a button if the user clicks on a date that has already passed. The issue I am facing is that when I initially click on a past date, the button remains enabled. However, upon ...

htmltypescriptionic3

Trouble with CSS attribute selectors not functioning as expected

In my PHP script, I am generating a list of items with links like this: <a href="page.php?day=1&month=1&year=2017"><li>item 1</li></a> Now I want to apply different styles to some of these items based on their day= paramet ...

phphtmlcsscss-selectors

django url not returning any data

Running a website using Python and Django has been quite the journey. I've implemented all the necessary changes to make it work smoothly. urls.py: urlpatterns = [ url('index.html', views.index, name='index'), url('admin/&ap ...

pythonhtmldjango

Tips for setting up the image as the header background in HTML5 and CSS3

I am currently designing a website. I'm wondering if there is a way to create a div with a curved bottom using HTML5, CSS3 and JavaScript. It should resemble the design of the curved header bottom ...

javascriptjqueryhtmlcss

Having trouble with playing the appended HTML5 Video?

Having trouble getting a video player to display after clicking a button. This is the code I use to add the video player in index.html: $("#videoContainer").append( "<video id=\"video-player\" width=\"100%\" height ...

javascripthtmlvideo

What steps do I need to take to create a custom image for a website?

I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...

javascriptcsshtml