How come Font Awesome icons aren't appearing in my link?

Is my question strange? I've noticed a peculiar behavior when using fontawesome. Normally, it displays correctly, and I have already referred to the documentation, but none of the solutions I found here seem to solve my issue.

Sources I have tried:

FontAwesome icons not showing. Why?

Why some of the Font Awesome icons do not show

Font Awesome is not showing the icon

None of the answers provided have resolved my problem.

In my stylesheet, I am utilizing an external link from Font Awesome:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

This is what I want to display:

<div id="whatsapp-go"><a target="_blank" href="#"><i class="fab fa-whatsapp"></i></a></div>

<div id="back-to-top"><i class="fas fa-arrow-up"></i></div>

Only the arrow icon appears, not the WhatsApp icon.

The image of the icon that doesn't show up

However, the icon shows without any problem when used in another element:

Icon shows without issues

Here is the code where the icon shows up:

<ul class="footer-follow">
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fa fa-envelope-square fa-2x" alt="#"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-whatsapp fa-2x"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-instagram fa-2x"> </i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-youtube fa-2x"></i></a>
    </li>
</ul>

Can anyone assist me with this?

CSS file :


/*------------------------------------*\
    Back to top
\*------------------------------------*/

#back-to-top {
    display:block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0bb89e;
    border-radius:50px;
    color: #FFF;
    z-index: 9999;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
    cursor: pointer;
}

#back-to-top:hover {
    opacity: 0.8;
}


/*------------------------------------*\
    Whatsapp-go
\*------------------------------------*/

#whatsapp-go {
    display:block;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0bb89e;
    border-radius:50px;
    color: #FFF;
    z-index: 9999;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
    cursor: pointer;
}

#whatsapp-go:hover {
  opacity: 0.8;
}

Answer №1

Even though the whatsapp icon is present, it may not be visible as it is nested within an <a> tag that has the same green color as the background:

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

To make the icon visible, change the font color to white.

#whatsapp-go a {
  color: white;
}

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

What is the best way to trigger a new css animation on an element that is already in the midst of

Let's talk about an element that already has an animation set to trigger at a specific time: .element { width: 100%; height: 87.5%; background: #DDD; position: absolute; top: 12.5%; left: 0%; -webkit-animation: load 0.5s ease-out 5s bac ...

Is there a way to fill an HTML text box with data retrieved from a session or managed on the server side using C# and HTML?

I have some textbox values on an aspx page that I pass to the next page using sessions. Now, I want to display these values in an HTML textbox. How can I achieve this? The values I have are server-side, while the HTML text box value is client-side (this is ...

Exploring WordPress's Query Page with Posts

My current code successfully pulls posts from a specified category, but I am struggling to also include pages in the output. I have tried various methods, but haven't been able to pull in both posts and pages at the same time. HTML/PHP <?php quer ...

Achieving a horizontal alignment of these four div elements containing images

I need some assistance with aligning the divs using the .acontainer class. It was working perfectly before adding the images, but now it's all messed up. I've tried various adjustments and searches online, but I'm still stuck. Thank you for ...

What is the method to show a tag while dragging content in html5?

How can I make a div element track the mouse movement while dragging an item on my website? I need the div to only appear when the user drags content that has been enabled for dragging. I'm looking for a straightforward method to customize the appea ...

Is it possible to position two fixed divs side by side?

I am currently in the process of building my online portfolio. I am looking to create two fixed divs that will not scroll, each occupying the full height of the page. The content between these two divs should be scrollable while the bars on the left and ri ...

How to style an HTML table with just a bottom border

Is there a way to recreate the Staff Directory section of this page using only HTML, without having to rely on CSS and Javascript? Specifically, I want to create a table with only bottom borders/dividers for each line. Any suggestions on how to achieve thi ...

Correcting the 1 pixel spacing issue in 3 containers each with a width of 33.333%

It is difficult to articulate, but I am noticing a 1 pixel line with 3 containers each having a width of 33.3333%. Unfortunately, this is not something I can change as it is part of the material-ui framework. <div class="container"> <div clas ...

NodeJS File Upload: A Step-by-Step Guide

I need assistance with uploading an image using nodejs. I am able to successfully send the file to node, but I am unsure how to handle the "req" object. Client <html> <body> <input id="uploadInput" type="file"/> < ...

Determine whether to show or hide a div based on the width of the

Is there a way to dynamically hide a div using Bootstrap 4 based on the screen width? Can this be achieved without using JavaScript? I am particularly interested in hiding certain text elements that are not relevant on smaller screens, such as mobile de ...

Using Node.js to send instructions to an HTTP server in order to highlight or add color to specific elements within

I have set up a server that receives data from a gaze sensor, as well as an HTTP server that serves an HTML page. I am looking for a way to dynamically highlight elements in the HTML based on the incoming data. Any suggestions on what resources or techniqu ...

Leveraging the Railway Pathway from the Google Maps API

I need to customize my map to display only railway stations instead of the entire map. How can I achieve this? Below is the code I have attempted: <html> <head> <style type="text/css"> html { height: 100% } ...

Endless Google Locations Instances

My database entries are being displayed in a table using input fields. I want the Location field for each entry to be automatically completed using Google's API. HTML: <input name="edit_airplane[1][location]" type="text" class="airplane_location" ...

Javascript keycode used to target the element when a key is pressed

In my current project, I am utilizing a code snippet to attach a KeyDown event handler to any element within the HTML form. for(var i=0;i<ele.length;i++) { ele[i].onkeydown = function() { alert('onkeydown'); } } I am ...

What exactly does the <cbn-root> HTML element signify, and how can it be parsed using Java programming language?

I attempted to develop a Java program to monitor the availability of reserved spots on this website: However, when I examine the page source using Chrome or Edge, only <cbn-root></cbn-root> is displayed in the body section. Yet, utilizing Chro ...

Variety of perspectives on Magento products

Is there a way to configure Magento 1.7 to display view.phtml for bundled products and view.phtml for simple products, or the other way around? I am looking to customize the views for different product types - what is the best approach to achieve this? ...

The navigation bar's background color remains static and doesn't update as

Struggling with HTML/CSS and unable to get the NAV bar to display the specified background color. Tried putting the nav in a class, commented out parts of the code, but still couldn't make it work. Despite looking for solutions, I can't figure ou ...

Off Canvas left navigation menu using Bootstrap

I am working on creating a responsive layout for a webpage using Bootstrap. On larger displays, such as desktop resolutions, I want the webpage to show the header and left navigation as normal. However, when the site is resized to that of tablets or mobile ...

Angular Tag < with CSS styling

Why should we use the angular tag in CSS? For example: .class << span Typically, we use these types of tags: body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-si ...

Incorporating a dynamic fill effect into an SVG pie chart

I am looking to animate a pie chart with a variable value that is unknown upon loading. Assuming I fetch the value promptly and convert it into a rounded percentage : var percentage = Math.round(sum * 100 / total); Next, I place this value here : <di ...