Cannot rearrange Font Awesome Icon

Having some trouble positioning my reply icon from Font Awesome next to my heart icon. No matter what I try, it ends up stuck in the corner of my div. I've experimented with various methods like vertical-align: middle but nothing seems to work in my case.

This is what my div currently looks like:

<div class="bubble sender first animate-bottom">
    <li class = "display" style = "color = white"> tkjfjk fjkg gfkjgdj gjkd reyk gklfg kgldg gfdklgd gkdlgd way &nbsp; &nbsp;
        <i class="fas fa-heart liked" aria-hidden="true"&glt;</i> <sub>6</sub>&nbsp; &nbsp; &nbsp; &nbsp;
        <i class="fa fa-reply reply" aria-hidden="true"></i>
    </li>
    <br>
    <span>

Despite the logical placement, the icon refuses to cooperate. Any assistance on this issue would be greatly appreciated.

For the JS Fiddle, please visit: https://jsfiddle.net/eam6yq28/

jqueryhtmlcssnode.jsejs

Answer №1

To update font-awesome icons with CSS modifications, consider adjusting the :before selector.

For your situation, include the following code in your CSS file:

.fa-mail-reply:before, .fa-reply:before {
    position: absolute;
    bottom: 0;
    right: 85px;
}
li {
    list-style-type: none;
    position: relative;
}

Check out the example on jsFiddle: https://jsfiddle.net/tua85Lrc/1/

Answer №2

Your HTML layout lacks semantic structure, but if you only want to position the reply icon after the heart icon, you can achieve this by removing the following CSS code from your stylesheet and disregarding any empty spaces.

.fa{
    /* CSS properties for heart icon */
}


@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:700&display=swap');
/* Other CSS styles */

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

The 'Bfrip' button is missing from the DOM

Having some issues with displaying table content using DataTables. Everything seems to be working smoothly except for the Buttons, which are not appearing as expected. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.1 ...

javascriptphpjquerycssdatatables

Acquire data from an HTML Element

I was provided with the following div that was already created for me: <div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1 ...

javascriptjquery

Executing a jQuery function using a hyperlink tag

How can I trigger the deactive_tiptip function in the Jquery tiptip plugin by clicking on a href link? The function will be called inside the tooltip div. Below is the code snippet of the tiptip plugin: /* * TipTip * Copyright 2010 Drew W ...

jqueryfunctiontooltipcalltiptip

What is the best way to display a placeholder instead of the state's value when a page loads?

I'm having trouble displaying the placeholder of an input instead of its state value. When the page loads, it shows an empty select box because the testType state is null initially. How can I make sure that only the placeholder is shown instead of the ...

javascripthtmlreactjsreact-hooksuse-state

Unexpected Error Causing Failure in jQuery Ajax Call

My jQuery ajax call is encountering an undefined error. Here is my JavaScript code snippet: $.ajax({ type: "POST", url: "Data/RealTime.ashx", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", timeout: 15000, ...

asp.netjqueryajaxashxgeneric-handler

What is the best way to integrate an AJAX callback into the stop condition of a `do while` loop?

Take a look at the code snippet below: let count = 0; do { $.ajax({ type: "POST", url: someurl, dataType: 'xml', data: xmlString, success: function(xml) { count++; } } while(co ...

javascriptjqueryajaxdo-while

Instructions on how to use the Node.js SDK to transmit events to api.ai

For the past few months, I've been working on developing chatbots using Api.ai. I have successfully connected it with a nodejs client and managed to send text queries from nodejs to api.ai, receiving responses back (as explained in the documentation: ...

node.jschatbotdialogflow-es

Is it possible to alter the value and label of an HTML button in a permanent manner?

I am developing a personalized management system that records your activities from the previous day based on the buttons you clicked. I have successfully implemented the ability to edit these activity buttons using jQuery, but I would like these changes to ...

javascriptasp.nethtml

Using jQuery to encapsulate HTML within a div tag

I am looking to insert some HTML markup into my webpage using jQuery. I want to wrap the highlighted yellow code below with <div class="section">...</div>. Here is an example of what I need: <div class="section"> <div>...< ...

javascriptjqueryhtml

Exploring the World of Html

I'm struggling with an HTML problem related to a web programming class I'm taking. The assignment involves creating a video game using HTML and JavaScript, where an image moves randomly on the screen and the player must click on it as many times ...

javascripthtmlcss

Exploring the Model Layer in Node.js with Express

When designing a MEAN stack application, the server side usually consists of a Model, View, and Controller. The Model typically represents the mongoose model for interacting with the database. However, if the application does not directly access the data ...

node.jsexpressmean-stack

What is the best way to substitute single and double-digit numbers with a single character using JavaScript?

My essay consists of a long string with letters and single or double digit numbers. I need to replace all the numbers, regardless of their length, with a "#" symbol. I attempted using str.replace(/[0-9]/g,"#"), which successfully replaced single digit nu ...

javascriptnode.jsregexregular-languageregexp-replace

What is the method to conceal an element after detecting and locating a specific class using jQuery?

Can someone please assist me today with the following task: Step 1: <div id="htmlData"> <div class="col-md-12"> <div class="pull-left"> <h3>Report: <strong>Travel </strong></h3> ...

javascriptphpjqueryhtmlcss

Retrieve the selected date from the date picker widget

Welcome to my custom datepicker! Here is the HTML code: <div class="field-birthday field-return" id="birthday-edit" style="display:none;"> <div class="birthdaypicker"></div> <input class="hidden" name="birthday" type="hidden" ...

javascriptjqueryhtmldatepicker

How can we centralize an image above text within a UL element?

Is there a way to achieve the effect shown in my mockup using just one unordered list (ul) instead of having separate ul elements for images and text? Essentially, I want to display an image with associated text below it within a single ul element using CS ...

csshtml-lists

Learn the process of including an active class using jQuery from an external active.js file!

This JavaScript code snippet $(function() { $("#navbar-nav li").click(function($) { // remove classes from all $("li").removeClass("active"); // add class t ...

phphtmljquerybootstrap-4

What is the best way to eliminate the space following the image?

Something strange happened, and now there's a big gap following the top image. I was working on making the code responsive and then inserted this image, which messed everything up. Any ideas on what I might be doing wrong? I want the image to be close ...

htmlcss

When using PHP files to send data through AJAX, be cautious of receiving only a "parsererror" message

After consulting with @skobaljic during a teamviewer session, it was discovered that I was not properly opening the html file in localhost, instead using the file system (file://...). I apologize for the confusion and time wasted. I am attempting to send ...

javascriptphpjqueryajax

Tips for sending a Postgres Pool or Client over a socket

After deploying my server to Heroku, I encountered an issue with sending a request to my Raspberry Pi for running a scraping function and updating a table in the Heroku Postgres database. The problem seems to be related to the client.query() function not b ...

javascriptnode.jspostgresqlsocketssocket.io

Generating a JSON file using JavaScript

Currently, I am attempting to create a JSON file through JavaScript. Since I haven't found the appropriate code yet, I am experimenting with creating a text file instead. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html&g ...

javascripthtmljson