Seeking guidance on how to display text below icons on my website. Can someone please provide instructions?
<div class="bottom-bar div-only-mobile" style="position: fixed; bottom: 0; width:100%">
<a href="Dashboard">
<ion-icon name="home-outline" class="icon" onclick="change(this)">
</ion-icon>Dashboard</a>
<a href="Profile">
<ion-icon name="person-outline" class="icon" onclick="change(this)">
</ion-icon>Profile</a>
</div>To tackle this task effectively, I utilize CSS positioning as my preferred method. By setting both the text and button elements to have an absolute position, I am able to then position them within the outer container accordingly.
<div class="bottom-bar div-only-mobile" style="height:100%, width:100%">
<a href="Dashboard" style="position:absolute, top: 30%, left: 30%">Dashboard</a>
<a style="position: absolute, top: 40%, left:30%"><ion-icon name="home-outline" class="icon" onclick="change(this)"></ion-icon></a>
<a href="Profile" style="position:absolute, top:30%, right:30%">Profile</a>
<a style="position:absolute, top: 40%, right:30%"><ion-icon name="person-outline" class="icon" onclick="change(this)"></ion-icon></a>
</div>
Hopefully, you find this information beneficial for your project!
Utilizing flex and direction is the key to solving this issue. It's important to note that fontawesome icons have been incorporated in this example, but they can easily be swapped out for others.
.link-item {
display: flex;
flex-direction: column;
align-items: center
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="bottom-bar div-only-mobile" style="position: fixed; bottom: 0; width:100%">
<a class="link-item" href="Dashboard">
<i class="fa-solid fa-user"></i>
<span>Dashboard</span>
</a>
<a class="link-item" href="Profile">
<i class="fa-solid fa-gauge"></i>
<span>Profile</span>
</a>
</div>If you want to achieve a similar layout, consider grouping each set of a, ion-icon, and text within an ion-item element, then include an ion-label inside it. I also enclosed the text in a div within each a tag. This structure might be what you're looking for.
<div class="bottom-bar div-only-mobile" style="position: fixed; bottom: 0; width:100%">
<ion-item slot="start">
<ion-label>
<a href="Dashboard">
<ion-icon
name="home-outline"
class="icon"
onclick="change(this)"
></ion-icon>
<div>Dashboard</div>
</a>
</ion-label>
</ion-item>
<ion-item>
<a href="Profile">
<ion-label>
<ion-icon
name="person-outline"
class="icon"
onclick="change(this)"
></ion-icon>
<div>Profile</div>
</ion-label> </a
>.
</ion-item>
</div>
Enhance your website design by using CSS ::after to display text beneath icons with just a few modifications to the code.
.icon{
position:relative;
margin:0px 20px;
}
.icon::after{
content:attr("data-name");
position:absolute;
top:100%;
left:0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<div>
<a href="Dashboard">
<i class="fas fa-dashboard icon" name="home-outline" data-name="DashBoard"onclick="change(this)">
</i></a>
<a href="Profile">
<i class="fas fa-user icon" name="person-outline" data-name="Profile">
</i></a>
</div>I am struggling with my dropdown menu and sign up/sign in buttons as they are not aligning properly. I have tried various coding methods but haven't been able to fix the issue. Can someone provide me with suggestions on how to rectify this problem? c ...
A generous user shared this code with me: $singles = valley_images(); $groups = valley_group_images(); $images = array_merge($singles, $groups); $sortArray = array(); foreach($images as $image){ foreach($image as $key=>$value){ if(!iss ...
I have an array of numbers in my angular application that I need to display in an HTML table without truncating them and ending with a comma. Each row should display a maximum of 20 values. How can this be achieved? The array looks like this - let arr ...
https://i.sstatic.net/xIi8m.png I'm trying to center align the checkbox between the Input and Button elements. I attempted using the "align-center" class in the "form-check" div, but it didn't work as expected. Could someone please provide me wi ...
section { background-color:#d5ecf2; width:1024px; height:200px; margin: 0 auto; } .sectiontext { float:right; height:180px; width:720px; margin:10px; } <section> <div class="sectiontext"> <h3>GDS 114.01: HTML and Javascript</h3 ...
I'm currently working on incorporating webfonts into a Jekyll build. Interestingly enough, the fonts show up perfectly fine when I view them locally, but once I push my project to a live environment, the fonts mysteriously disappear. To make matters w ...
I'm striving to create a design similar to this - https://i.sstatic.net/hcaST.png Initially, I attempted to use a hr tag and modify it for my purposes. However, my efforts have not yielded the desired outcome. Any assistance in understanding this co ...
<div class="bg-primary rounded-pill"> <p class="text-right"> TOTAL AMOUNT </p> <p class="text-right"> 200 </p> </div> I would like the text within a div element to appear in a capsule shape. Is there a way t ...
I am facing an issue with two DIVs on my webpage. One of them is set to have display:none based on certain conditions. Surprisingly, it works perfectly fine on IE10, Firefox, and Chrome. However, the problem arises on IE8, IE9, and IE10 Compatibility Vie ...
The loadCSS library developed by Filament Group is widely recognized as the standard for asynchronously loading CSS. Even Google recommends its use. However, instead of using this library, some suggest utilizing ajax to achieve the same result. For example ...
I am looking to incorporate a sleek sliding animation on an article that reveals more information in a div upon mouseover. A great example of this can be seen on where clicking at the top right corner triggers the "Show Modern Dev Ad" feature. Below is m ...
I have implemented a filter search feature within two tables on my website. My goal is to retrieve the search results for a specific drink while keeping the table headings fixed in their positions. For instance, if I type "Corona" into the search box, I ...
For my current project, I am utilizing Strapi as the CMS and Next.js. My task is to generate meta open graph tags dynamically. However, after deployment, when I attempt to share my website link on social media platforms such as Facebook or WhatsApp, the ti ...
My HTML list is structured like this: <ul id="remove"> <li id="rm_txt_1" onClick="remove_1();">Remove </li> </ul> <ul id="move"> <li id="mv_txt_1" onClick="position();">Move Down</li> </ul> It is styled u ...
Creating a gaming website and encountering challenges with text alignment. The goal is to have the navbar text positioned on top of a customized navbar background. Current appearance navbar example <!DOCTYPE html> <html> <head> ...
Is there a way to submit an image file to php using ajax without assigning the file to a variable with onchange event? I've tried triggering the request on submit click, but keep getting the error message: "cannot read property 0 of undefined." <ht ...
How can I reference a list element added using the append function in jQuery within my onclick function? See my code snippet below: $(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET ...
I have a question that I couldn't find an answer to. I need to merge two arrays and export them to an Excel file using only JavaScript/jQuery. Let's say we have two arrays: Array 1 : ["Item 1", "Item 2"] Array 2 : ["Item 3", "Item 4"] When the ...
Summary of the problem: I am searching for a method to establish font size values based on an element inside a shadow dom relative to the shadow host, regardless of the parent element's font size within the shadow dom. I am looking for a solution sim ...
I am currently working on a shopping cart project, specifically on the "previous orders" page to display order details. My goal is to output this information in an (.ejs) file. The data structure includes nested objects, and within one object, propertie ...