Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example

https://i.sstatic.net/w84xS.png

Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here

https://i.sstatic.net/yqnbJ.png

You may notice a difference in spacing between the two. Here is my CSS code: 

.custom_list li {
 line-height:2em;
 padding-left:0px;
 padding-top:5px;
 padding-bottom:5px;
 font-size:14px;
 list-style-type:none;
 list-style:none;
}
.custom_list li:before {
 font-family: 'FontAwesome';
 content: "\f192";
 color: black;
 margin-right:15px;
}

The HTML structure looks like this: 

<ul class="custom_list" >
  <li>Medical Student Education</li>
  <li>Resident Training Education (Medicine, Osteopathic, Pharmacy)</li>
  <li>Fellowship Training Education (all medical subspecialties)</li>
  <li>Nursing Student Training Education</li>
  <li>Nurse Practitioner Education</li>
  <li>Nurse Continuing Education</li>
  <li>Physician Continuing Medical Education</li>
</ul>

What could be causing this issue?

csshtmlfont-awesome

Answer №1

.styled_table tr {
 line-height:2em;
 padding-left:0px;
 padding-top:5px;
 padding-bottom:5px;
 font-size:14px;
 list-style-type:none;
 list-style:none;
 display: table-row;
}
.styled_table tr:before {
 font-family: 'FontAwesome';
 content: "\f192";
 color: black;
 margin-right:15px;
 display: table-cell;
}

Transform your list into a formatted table

Answer №2

Be cautious when using font awesome 5 as it requires a different font name,

.custom_list li:before {
    font-family: 'Font Awesome 5 Free'
}

Answer №3

.defined_list li {
 line-height:1.8em;
 padding-left:25px;
 padding-top:10px;
 padding-bottom:10px;
 font-size:16px;
 list-style-type:none;
 list-style:none;
}
.defined_list li:before {
 font-family: 'CustomIcons';
 content: "\e821";
 color: navy;
 margin-right:20px;
 position:absolute;
  left:45px
}

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

One method I use to retrieve ajax data and assign it before rendering the view

Despite putting the ajax.get in the created function, I am still unable to retrieve the ap_name value. This issue is related to vue.js created: function () { ajax.get('/envs').then(function (res) { this.apName = res.AP_NAME; ...

javascripthtmlvue.js

Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understa ...

htmlcssbootstrap-5

Creating a CSS Box Along the Border of Another Box: A Step-by-Step Guide

Is there a way to render a box on another box's border, similar to the example image here: Expected Output I attempted using flexbox to achieve this, but unfortunately wasn't successful in finding a solution. If you have any advice or suggestio ...

htmlcssflexboxfrontend

Sections overlap, extending the content beyond their designated boundaries

I am facing an issue where the header in the first section remains fixed as an attachment, but when I resize the browser window, the background only covers a small portion of the section. The rest of the content either goes under another section or complet ...

htmlcssviewpositioningclearfix

Is there a way to toggle the slide effect of one 'div' without affecting another one?

Hey everyone! I am new to jquery and currently working on a project with two div elements that are slidetoggled. The issue I am facing is that when I open or close one div, the other div also moves along with it. I understand what is happening in the back ...

javascriptjqueryhtmlslidetoggle

Mysterious gap found between image and table

Hey there! I've been struggling with an unusual gap between a top image and a table on my website (www.tradecaptaincoaching.com). The table was created using . Despite spending hours on it, I can't seem to get rid of the huge 200 pixel gap that& ...

htmlcss

Summon the keyboard to appear

How do I make the keyboard appear on my website? I have a javascript function that recognizes keyboard input, but I am struggling to display the keyboard on my mobile device. Is there a way to simulate traditional input and generate key events? I should ...

javascripthtmlmobile

Expanding using CSS3 to ensure it doesn't take up previous space

Currently, I am working on an animation for my web application. More specifically, I am looking to scale certain elements using CSS3 with the scaleY(0.5) property. These elements are arranged in a vertical list, and I want to ensure that they do not take u ...

javascripthtmlcss

Bootstrap - Progress Bar Display

I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, ...

csstwitter-bootstrap

Arranging HTML Lists in Perfect Order

I am working with an HTML list that contains links styled as background images rather than text. The container is 200px tall and I would like the links to be centered inline within the container. Usually, I would use line-height:200px; for text to achieve ...

htmlcsshtml-lists

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...

javascripthtmlcssbootstrap-5

Is there a way to access a private table in Google BigQuery using a Python script without needing an authorization token?

Is there a way to submit a query into Google's BigQuery and retrieve results from a python script without needing an authorization code for private tables? The python script is accessed through a user-friendly webpage, so manual authorization code han ...

pythonhtmlsqlgoogle-bigquery

What is the process for retrieving data from a javascript file that was submitted through a form?

Can you help me with an issue I'm having with this code snippet? <form action="main.js"> <input type="text" required="required" pattern="[a-zA-Z]+" /> <input type="submit" value="Submit" /> </form> After c ...

javascripthtmlformsinputsubmit

Position the title of the Bootstrap selectpicker field to the right

I utilized Creative Tim's Material Dashboard Pro to create a select field. My goal is to align both the select field and its options to the right. Currently, I have only been successful in aligning the options while the title and selected option rema ...

cssselectbootstrap-4right-to-left

The importance of adding blank spaces in email formatting

A Visual Basic 6 application is sending a HTML email. The issue is that when the email is received, all blank spaces are removed. For example, in the code snippet below, the email sent says "this is a test" instead of displaying the actual spaces on line ...

htmlvb6

Adding a contact form to a slider: A step-by-step guide

Currently, I am faced with the challenge of placing my form on a slider in such a way that the slider appears to be running in the background of the form. When using position absolute, I find myself having to apply excessive margins and top pixels due to t ...

javascriptjqueryhtmlcsstwitter-bootstrap

I seem to be having trouble getting my CSS to load properly on Internet Explorer 11 and Firefox, as it only seems

Currently, I am in the process of developing a basic webpage. Oddly enough, my CSS styling seems to be functional only in Chrome, with no success when it comes to both Firefox and IE11. Here is a snippet of my HTML code: <html> <head> < ...

htmlcssinternet-explorergoogle-chromefirefox

VSCODE's intellisense feature seems to be ignoring CSS code within JSX files

I've been puzzling over why Visual Studio Code isn't recognizing CSS syntax inside JSX files. While I'm typing, CSS IntelliSense doesn't provide suggestions for CSS - only Emmet suggestions.https://i.stack.imgur.com/FegYO.png Despite t ...

cssreactjsvisual-studio-codejsxsyntax-highlighting

Enhancing spacing in Bootstrap 5 with additional spacers

Looking to enhance the spacers in Bootstrap 5 by incorporating it into Sass and customizing the variables. I'm aiming to avoid redundantly defining Bootstrap's spacer options, which are as follows: $spacers: ( 0: 0, 1: $spacer * .25, 2: $s ...

htmlcsssassbootstrap-5

Unable to move up and down in my iframe

I am currently working on an Instagram page that is visible through an iframe. Everything seems to be functioning fine on my iMac, but I am facing an issue with scrolling on my iPhone and iPad? After reviewing my code, I couldn't find any hidden over ...

htmlcssiframescrolloverflow