Center align a font-awesome icon vertically next to a paragraph of text

Is there a way to align a font-awesome icon on the left side of a text paragraph while keeping the text on the right side, even if it's longer and wraps underneath the icon?

I've tried various code snippets but haven't found a solution yet. Can anyone help me with this?

Check out my Fiddle example: Fiddle

Here's the HTML code:

<div class="modal-body">
<p><i class="fa fa-check-circle"></i> bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>

And here's the CSS:

i.fa.fa-check-circle {
    color:#000;
    font-size:80px;
    float:left;
    display:inline-block;
    text-align:center;
}

.modal-body p {
    font-style:LuzSans-Book;
    font-size:30px;
    line-height:1.43em;
}

Answer №1

Consider structuring your code in the following way:

HTML

<div class="modal-body">
    <div class="icon"><i class="fa fa-check-circle"></i></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ligula vel risus eleifend rhoncus.</div>
</div>

CSS

.icon {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid pink;
}

i.fa.fa-check-circle {
    color:#000;
    font-size:80px;
    float:left;
    display:block;
    text-align:center;
    background-color: red;
    width: 32px;
    height: 32px;
}

.text {
    display: table-cell;
    vertical-align: top;
    font-style:LuzSans-Book;
    font-size:30px;
    line-height:1.43em;
    border: 1px solid orange;
}

I have updated your existing Fiddle with this modified code for a live demonstration. I added visible borders to emphasize the structure and applied a background color to highlight the Font Awesome icon.

If you prefer the Font Awesome Icon at the top of the left column instead, simply adjust the vertical alignment to top. For more information on table alignment, check out W3Schools' guide on vertical alignment.

Answer №2

Simply incorporating

style="margin: 20px"

Does wonders for my project!

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

Scrolling horizontally in ng-grid version 2.0.11

In my application, I am utilizing a ng-grid with auto height and width. The challenge arises when dynamically adding columns to the grid. If there are too many columns to display, instead of showing a horizontal scrollbar, the columns shrink in size and ap ...

My webpage lacks responsiveness

I've recently put together an HTML page, but unfortunately, it's not responsive. My Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...

Troubleshooting the 'innerHTML' Issue in Your Python Selenium Script

My Python Selenium script for sending emails via Gmail is throwing an error, and I need some assistance to resolve it. The error details are as follows: Traceback (most recent call last): File "C:\Users\Administrator\Desktop\New ...

What is the process for creating a login page that redirects automatically?

For instance: Whenever I enter gmail.com, it automatically takes me to this link: https://accounts.google.com/signin/v2/identifier?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1&ltmp ...

What is the best way to extract styled HTML tags from I18N properties files using the Makara module in conjunction with Express and Kraken.js?

I'm currently utilizing Makara, an I18N module designed for Kraken.js and Express.js. Imagine a scenario where I need to format a specific word within a sentence, but its placement varies based on different languages. I want to ensure that this can b ...

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

Tips for displaying an mp4 video using an HTML video tag when the video is uploaded through Multer

I am encountering an issue while trying to play a video on my website. The video is uploaded through multer using node.js and in the express framework. The file gets inserted into the database and assigned a specific folder with a filename like 1b47c24b20c ...

Tips for displaying and concealing a toggle button based on screen size changes

My goal is to display my userlist without a toggle button by default when the screen is in full size, and only provide a toggle button when the screen is in mobile size to allow users to show/hide the list. Currently, I am utilizing the following code: & ...

Is there a way to implement a "report" button for sending messages that doesn't require using email?

I am in need of a button that reads "Report a typo" and alerts me when it is clicked on a specific page. The project I am working on consists of multiple short pages with just a few paragraphs in each HTML template. It would be helpful for me to have a way ...

What is the best way to position an <a> tag in the top right corner of a card using Bootstrap?

I own a card that features an image in the background. <div class="col-12 col-sm-8 col-md-6 col-lg-4 mt-4"> <div class="card"> <img class="card-img" style=" filter: brightness(75%);" src=& ...

"Adjusting the size of a circle to zero in a D3 SVG using Angular 2

Trying to create a basic line graph using d3 in Angular 2 typescript. Below is the code snippet: import { Component, ViewChild, ElementRef, Input, OnInit } from '@angular/core'; import * as d3 from 'd3'; @Component({ selector: 'm ...

The selenium element for the submit button is currently not responsive to interactions

Recently, I encountered some challenges with selenium, specifically the anticaptcha API. Although I managed to resolve that issue, I am currently facing a different problem. Below is my existing code: from time import sleep from selenium import webdriver f ...

Error message stating that there is no property 'collection' in Firestore when using Firebase v9 modular syntax in Firebase Firestore

Working on a React application that makes use of Firebase Firestore for handling database operations, I recently upgraded to Firebase version 9 and adopted the modular syntax for importing Firebase services. Nevertheless, when attempting to utilize the co ...

Disabling the default validation message in HTML form inputs

Is there a way to change the default message that appears when submitting an empty HTML text input? I would like the box border to turn red instead. Can anyone help me achieve this? Below is the code for the text input box: <div class="input-group ...

browsing through a timeline created using HTML and CSS

I am currently working on a web project that involves creating a timeline with rows of information, similar to a Gantt chart. Here are the key features I need: The ability for users to scroll horizontally through time. Vertical scrolling capability to na ...

Creating a single-level menu with Bootstrap using nested angular ng-repeat

I am currently working on developing a single level menu using bootstrap and angularJS. The menu is successfully functioning with JavaScript and HTML when the <li> element is dynamically created. Now, I am attempting to integrate AngularJS into the ...

Modify the value of a CSS property through JavaScript

Hey there, I'm wondering how to change a CSS value of the document itself, rather than targeting a specific element. I've already looked into solutions like Change :hover CSS properties with JavaScript, but they all involve adding CSS rules. I a ...

html2canvas bottom margin

I coded this in react function download(element) { html2canvas(element).then((canvas) => { window.open(canvas.toDataURL('image/png')); }); } return ( <div className='box' onClick={( ...

Checkbox Selection - Modify Prompt to "Kindly mark this box to continue"

I have created a multi-select checkbox form, and I've added some JavaScript to ensure that the visitor selects at least one option <div class="form-group options"> <label class="control-label col-md-4" for="optiontext">Specify an option&l ...

Jump to a specific section on a different page when the links are already equipped with anchors for smooth scrolling

My website has a menu on the home page that scrolls to specific id positions: <li><a href="#event-section">El evento</a></li> <li><a href="#asistentes-section">Asistentes</a></li> <li><a href="#cont ...