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" />While Bootstrap ensures that relative images are responsive, absolute images may not be. This can cause alignment issues when the browser window is resized on mobile devices. .title-img { position: relative; width: 100%; height: 100%; } .skill-b ...
Ever since a forced reboot, my parallax scrolling page has been experiencing issues. A strange whitespace seems to be throwing off the sections, only appearing every other section - one is fine, the next is offset, and so on. I've carefully gone thro ...
Recently, I successfully set up a LAMP server on my raspberrypi which was quite exciting. One of the first things I did was configure an FTP server to transfer webpage files to the Pi. I managed to create a basic form of the final webpage and transferred i ...
I created an HTML file but the CSS properties are not displaying correctly in the browser. I'm not sure where I made a mistake. Instead of using a separate CSS file, I have included it directly in the HTML file. <!DOCTYPE html> <html> &l ...
Currently, I am working on a user registration form using AngularJS with ng-submit and ng-model. However, I am facing an issue where the form triggers submission twice when the user submits it. I have checked for common causes such as declaring the contro ...
I'm having some issues with my bootstrap modals that contain images. When the images are long vertically, a scrollbar appears which is not ideal. I tried to solve this by setting a max-height for the modal-content and making the modal-body (where the ...
I'm currently in the process of developing a program that showcases various topics within a specific subject. My main query revolves around whether or not the DataTable functionality will be compatible with this particular setup. The following is th ...
Can we target an external element based on its descendant elements? This question arises from the need to apply one stylesheet to two different dynamic pages within the same wrapper. Page 1 <div id="api"> <div class="a"></div> </div ...
Need help with searching for specific text within a large HTML table of emails and selecting a button within the element? You can easily find the table body via XPATH by using: //*[@id="reportList"]/tbody Within this table, there are multiple rows (tr). ...
Just starting to work with bootstrap and I'm currently focusing on learning how to stack cards. Here is the code I have: <div id="home"> <div class="row"> <div class="col-12 col-sm-6 col-md-4"> <div class= ...
Currently, I am attempting to place a logo on my WordPress site right at the top of the header above the menus and in the center. Even though I've positioned it at the top, I'm struggling to align it horizontally in the center. I've experime ...
One issue I've encountered is with the ajax image upload feature on my form. It uploads the image when triggered by the onChange event for the file input, but then it uploads again when submitting the form. Is there a way to prevent this duplicate upl ...
My select box works fine in IE and Mozilla, but throws an uncaught rangeError in Chrome when choosing the "Others" option to display a second select box with over 10k options. How can I diagnose and resolve this issue? <!DOCTYPE html> ...
I'm currently facing an issue with the layout of my navbar. While I've managed to create a fixed navbar that stays at the top, the content on the page seems to be hidden underneath it. To address this problem, I attempted to add a 5% margin from ...
My HTML page consists of 2 div blocks and 2 links. I want to open the content of the first div in a new window when the first link is clicked, and the content of the second div in another new window when the second link is clicked. You can find the code h ...
I recently created a webpage utilizing jQuery: The functionality on the page should change music images to represent different key signatures when switching from 'Higher Key' to 'Lower Key' in the combo box. While this works perfectly ...
Recently, I integrated MDL into my Angular project. While most of it is functioning properly, the MDL icons seem to be giving me trouble... I've implemented them using <i class="material-icons">share</i>, but instead of displaying as an i ...
I currently have a div with the following content: <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div> Whenever I press the right key, an event is triggered to change the PageMap.ColumnWrap.Overvie ...
I'm attempting to right float the button below using material-ui, but I'm unsure of how to achieve this: <Grid item xs={2}> <Button variant="contained" color="secondary&quo ...
Currently, I am attempting to incorporate two anything sliders within the same webpage. My goal is to apply unique styling to each slider. Despite my efforts, I am encountering difficulties in calling upon a second style sheet without it completely overr ...