Need help aligning text and icons inside paragraph tags on a tag.
Here is the HTML code I'm currently using:
<div class="application-intro">
<p><a class="btn" href=""><i class="fas fa-file-pen"></i><span>Sample text 1</span></a></p>
<p><a class="btn" href=""><i class="fas fa-file-arrow-up"></i><span>Sample text 2</span></a></p>
<p><a class="btn" href=""><i class="fas fa-magnifying-glass"></i><span>Sample text 3</span></a></p>
</div>
One reason for this is that icons do not have the same default width.
.application-intro p i {
border: solid 1px;
}<div class="application-intro">
<p><a class="btn" href=""><i class="fas fa-file-pen"></i><span>Sample text 1</span></a></p>
<p><a class="btn" href=""><i class="fas fa-file-arrow-up"></i><span>Sample text 2</span></a></p>
<p><a class="btn" href=""><i class="fas fa-magnifying-glass"></i><span>Sample text 3</span></a></p>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />To resolve this issue, you can give all icons the same width.
.application-intro p i {
border: solid 1px;
width: 20px;
}<div class="application-intro">
<p><a class="btn" href=""><i class="fas fa-file-pen"></i><span>Sample text 1</span></a></p>
<p><a class="btn" href=""><i class="fas fa-file-arrow-up"></i><span>Sample text 2</span></a></p>
<p><a class="btn" href=""><i class="fas fa-magnifying-glass"></i><span>Sample text 3</span></a></p>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />Before checking out the following code snippet, I have a requirement. Whenever a specific checkbox (identified by id cfc1) is clicked, it should not show as checked. I have implemented the onCheck function for this purpose, but I'm struggling to fig ...
Here is my custom box: <div class="customBox"></div> It features a unique animation: .customBox{ animation:right 5s; animation-fill-mode:forwards; padding:50px; width:0px; height:0px; display:block; background-color:bla ...
Currently working on dynamically adding rows to a table through jQuery in my project that follows MVC design pattern. I have set up a loop for the added rows, but need help with the script. Here is my code snippet for the loop : <?php $viewTableR ...
Is there a way to differentiate binary messages from a server by tagging them with a type attribute? Currently, I am working with node.js and sending binary images as blobs to my client. However, I now also need to send other file types like .txt over the ...
My goal is to utilize the Google Maps API in order to showcase a map using data from a JSON file. However, whenever I attempt to incorporate the JSON data, an error message 'Error: [$interpolate:noconcat] Error while interpolating' pops up. < ...
In the process of modifying a form view on OpenERP7 through inheritance, I am attempting to adjust the width of a field to 50% (currently at 40%). While I have successfully altered the style and width of the field using pixels, any attempt to input a perce ...
Currently, I am working on a web page that utilizes a horizontal layout. However, when viewing the page on mobile devices, I want to restrict scrolling to only the horizontal direction, preventing users from being able to scroll up or down. As it stands n ...
Struggling to create a unique HTML/CSS layout that extends beyond the center? Imagine a standard horizontally centered page, but with one div expanding all the way to the right edge of the browser window. This design should seamlessly adjust to window res ...
I am presenting the following HTML code excerpt... <!DOCTYPE html> <html lang="en-US" ng-app> <head> <title>priklad00007</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angula ...
My current code is: this.html(this.html().replace(/<\/?([i-z]+)[^>]*>/gi, function(match, tag) { return (tag === 'p') ? match : '<p>'; return (tag === '/p') ? match : '</p& ...
I am currently using MUI version 5 to create a table. In this table, there are two columns with cells that contain multiline TextFields. My goal is to have the TextFields completely fill the cell area. However, I am encountering an issue where when I start ...
Looking to enhance my Joomla site by installing a plugin that allows me to toggle the visibility of content with a click, similar to how FAQ sections work on many websites. Question 1 (click here for the answer) { Details for question 1 go here } Questi ...
We currently have an intranet with numerous html pages and various attachments such as .doc and .xls files. We are contemplating migrating all of this to Confluence WIKI. Is there any script or automated tool available that can assist us in this migratio ...
Looking to style specific div elements with the same class name? <div class="main"> <div class="banner_image"> banner 1</div> <div class="banner_image ">banner 2</div> <div class="banner_image ">banner 3</di ...
While working on my website, I encountered a peculiar issue with the box-shadow in Chrome 51. My site has a fixed header with a box-shadow, but when I scroll up or down, the box-shadow leaves behind some marks (horizontal gray lines): https://i.stack.imgu ...
I am interested in changing the right border color of a DIV when another one is hovered over. I had to use a unique solution to make slideToggle work, so I assume this will require a different approach as well. Below is the detailed code: $(document).rea ...
Can I detect the addition of a specific CSS class to an element without having to create a new event? ...
Feeling a bit puzzled: https://i.stack.imgur.com/S7xKh.png In the image, there's a span button labeled "Navigation einblenden", and a span a tagged as "Suche". Despite styling them identically: In the CSS snippet, dispOpts is the parent span's ...
I'm struggling to achieve the desired look of my ancestor chart using an unordered list format. Initially, I borrowed code from CSS3 Family Tree, but found it to be more like an organizational chart rather than a family tree. For testing purposes, he ...
Here is the HTML DOM element I have... <input type="text" style="width: 200px;" id="input1"/> I want to make sure it stores date values. How can I specify that in the DOM element? Please provide your suggestions. Thanks! ...