Font Awesome 图标不会移动

Question

So I'm having a bit of an issue with the placement of my reply icon from font awesome. I've been trying to place it next to my heart icon but to avail. It's just sitting in the corner of my div and I've tried to use ways to move it but vertical-align: middle and other techniques I've read on other post don't work in my situation.

Here how the div 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"></i> <sub>6</sub>&nbsp; &nbsp; &nbsp; &nbsp;
        <i class="fa fa-reply reply" aria-hidden="true"></i>
    </li>
    <br>
    <span>

Logically, it should be in the correct position but that is indeed not the case. Any help would be appreciated.

JS Fiddle Here: https://jsfiddle.net/eam6yq28/

Answer 1

Whenever you want to make css changes to font-awesome icons try to change in :before selector.

In your case add below code to your css file

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

Here is th js-fiddle: https://jsfiddle.net/tua85Lrc/1/

Answer 2

Your html structure is not semantic but If you just need to place reply icon after heart icon, then just remove below css code from your css file and ignore blank spaces.

.fa{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #07051a;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

 @import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:700&display=swap'); #title { font-family: 'Encode Sans Semi Condensed', sans-serif; font-size: 85px; color: #cc5500; } #top, #main{ text-align: center; } ul { font-family: 'Encode Sans Semi Condensed', sans-serif; list-style-type: none; color: white; } li { list-style-type: none; } body { background-color: black; /* may have to get rid of this, if any problems arise */ overflow-x: hidden; } form{ position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all 1s; width: 50px; height: 50px; background: white; box-sizing: border-box; border-radius: 25px; border: 4px solid white; padding: 5px; } #changelater{ position: absolute; top: 0; left: 0; width: 100%;; height: 42.5px; line-height: 30px; outline: 0; border: 0; display: none; font-size: 1em; border-radius: 20px; padding: 0 20px; } form:hover{ width: 350px; cursor: pointer; } form:hover #changelater{ display: block; } form:hover .fa{ background: #07051a; color: white; } ::placeholder, input[type="search"], input[type ="text"] { font-family: 'Encode Sans Semi Condensed', sans-serif; } footer { font-family: 'Encode Sans Semi Condensed', sans-serif; font-size: 12px; color: white; text-align: center; } html { font-family: 'Encode Sans Semi Condensed', sans-serif; } .discussion { max-width: 600px; margin: 0 auto; display: flex; flex-flow: column; } .discussion > .bubble { border-radius: 1em; padding: 0.25em 0.75em; margin: 0.0625em; max-width: 50%; } .discussion > .bubble.sender { align-self: flex-start; background-color: #cc5500; color: #fff; } .discussion > .bubble.recipient { align-self: flex-end; background-color: #efefef; } .discussion > .bubble.sender.first { border-bottom-left-radius: 0.1em; } .discussion > .bubble.sender.last { border-top-left-radius: 0.1em; } .discussion > .bubble.sender.middle { border-bottom-left-radius: 0.1em; border-top-left-radius: 0.1em; } .discussion > .bubble.recipient.first { border-bottom-right-radius: 0.1em; } .discussion > .bubble.recipient.last { border-top-right-radius: 0.1em; } .discussion > .bubble.recipient.middle { border-bottom-right-radius: 0.1em; border-top-right-radius: 0.1em; } .clicked { color: red; display: block; } .scroll { height: 500px; width: 1000px; overflow-x: hidden; overflow-y: auto; } span { font-size: 8px; } #style-3::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: black; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); } #style-3::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } #style-3::-webkit-scrollbar-thumb { background-color: white; } .animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 500ms; animation-name: animatebottom; animation-duration: 500ms } @-webkit-keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0px; opacity:1 } } @keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 } } .pages { height: 100%; margin: 0; padding: 0; width: 100%; display: none; } .page { height: 100%; position: absolute; width: 100%; } /* Login Page */ .login.page { background-color: #000; } .login.page .form { height: 100px; margin-top: -100px; position: absolute; text-align: center; top: 50%; width: 100%; } .login.page .form .usernameInput { background-color: transparent; border: none; border-bottom: 2px solid #fff; outline: none; padding-bottom: 15px; text-align: center; width: 400px; } .login.page .title { font-size: 200%; } .login.page .usernameInput { font-size: 100%; } .login.page .title, .login.page .usernameInput { color: #fff; font-weight: 100; } /* Media Query */ @media only screen and (max-width: 500px) { .formobile { overflow-x: hidden; } #title { font-size: 45px; } .discussion { padding-left: 5px; display: block; } section { text-align: center; } .discussion > .bubble { margin: 1em; max-height: 80px; max-width: 50%; } }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="discussion scroll scrollbar " id="style-3"> <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"></i> <sub>6</sub>&nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-reply reply" aria-hidden="true"></i> </li> <br> <span>Sent </span> </div> </section>