Chrome Browser Facing Issue with Loading Font Awesome Package

Today I made an interesting observation on my website. Font Awesome was not loading properly on Chrome. Instead of displaying the double down arrow in the gradient circle, it was missing on my laptop's Chrome browser. Interestingly, it appeared correctly on Chrome on my Google Pixel. I suspect that they might be different versions of the browser, one being for a mobile device. The strange part is that it was working fine when I tested it earlier, and I haven't made any changes to the code. I'm really puzzled by this.

In the head section of my website, I have this code: 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Below is the snippet of code for the font-awesome library that I am using:

<div class="arrowContainer">
    <div class="arrow"><i class="fa fa-angle-double-down" aria-hidden="true" 
    style="font-size:36px; color: white"></i></div>
</div>

htmlcssbootstrap-4font-awesome

Answer №1

It appears that your website is not loading with the secure HTTP protocol. In order to fix this, you can either update your website to use HTTPS, or you can modify the head link to:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

By only using //, the appropriate protocol will be chosen based on your website's protocol.

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

Bypassing CSS rules for elements not present in the DOM

In case an element is absent from the DOM, I want to include margin space. Conversely, if the element is present, no margin space should be added. I have experimented with CSS for this purpose: A - To ensure there is no margin-top if the H2 title is displ ...

css

Switch the appearance between two elements

In my HTML table, I have different levels of content - from main "contents" to nested "sub-contents" and even deeper "sub-sub-content". My goal is to hide all sub-content within the content cell that I click on. <table> <tr class=' ...

javascriptjqueryhtml

Tips on arranging check-boxes horizontally in this code repository

We are working with an autogen form in PHP, and the way the checkboxes are currently displayed is demonstrated in the following code: case FIELD_CHECK_BOX: $fieldHtml = printCheckbox($mode, $field->getId().'[]', $field->get ...

phphtml

Toggling the visibility of a div using JavaScript

When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click? HTML <p>Click the button</p> <button onclick="myFu ...

javascripthtmlcss

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

Is it possible to restrict HTML5 Drag & Drop functionality between different browsers or windows? I am currently working on an Angular2 app that utilizes native HTML5 Drag and Drop feature. Is there a way to prevent users from dragging items out of th ...

javascriptangularhtmldrag-and-drop

Can a single value be stored in a table using a radio button?

I have created an HTML table that is dynamically generated from a database. I am using a for loop to populate the table. However, I am facing an issue where each radio button in the table holds only one value. What I actually want is for each row to have ...

javascripthtml

Only one specific SVG tag is affected by the CSS stylesheet

I'm encountering an issue with my web page that has multiple SVG tags. Each SVG tag includes a block of style tags containing CSS styles for the respective SVG element. The problem is that these styles seem to leak into the overall global styles. For ...

csshtmlsvg

Choosing identical elements within comparable sub-divisions

How can I use JQuery to select an array of elements that are in separate sub divs? For example: <div class="panelWrap"> <div id="dvStage1" class="milestoneWrap" runat="server"> <div class="grid_1 ...

jqueryhtmlasp.net

Unable to expand Bootstrap navbar due to collapsing issue

I recently implemented a collapsed navbar on my website using bootstrap. However, I'm facing an issue where it does not open when clicking on the hamburger menu. After researching various solutions for this problem and trying them out, none of them s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for placing a button on top of an image

Greetings and well wishes during this unique period we're currently experiencing! Can anyone share how to position a button over an image (located here)? I am utilizing Visual Studio, Jekyll, and Github. After attempting to copy and paste the exact ...

htmlcssbuttonjekyll

How to effectively use flexbox to resize child elements in a CSS layout

My goal is to create a layout where a child element fills the entire flex box of a flex layout. Here is an example of the HTML structure I am using: <div class="parent"> <div class="child1"> should have 100px height </div&g ...

htmlcssflexbox

Preserving form data using JavaScript exclusively upon submission

Hey there! I'm facing a little issue with a Form that has multiple checkboxes and a piece of JavaScript code designed to save the state of each checkbox when the user hits submit. My problem is that, currently, the checkbox state is being saved even i ...

phpjavascriptjqueryhtmlforms

Ways to reduce the amount of time spent watching anime when it is not in view

My anime experiences glitches as the black container crosses the red, causing a decrease in duration. Is there a way to fix this glitch? I attempted to delay the changes until the red path is completed, but the glitches persist. delayInAnimeSub = ourVilla ...

javascripthtmlcssanimation

CSS - revealing additional submenu on hover

I'm currently working on customizing a Wordpress menu that includes classic menu items and their respective submenus. The issue I'm facing is that when I hover over an item with children, its submenu will display. However, I want to have a fixed ...

htmlwordpresscsshover

Fixed Sidebar Position Changes when Bootstrap Modal Closes

We are facing a peculiar issue in our React application involving a sidebar and a bootstrap modal. The problem arises when we click the "X" button in the modal, causing the sidebar to momentarily drop down the page before the modal closes. This strange be ...

cssreactjssassreact-bootstrap

The Bootstrap-Select dropdown refuses to open

I've been attempting to create a menu using data-subtext, and while I have come across some suggestions on stackoverflow, I'm still having trouble getting the menu to function properly. The issue I'm facing is that the menu doesn't seem ...

htmljquerycssbootstrap-selectbootstrap-selectpicker

What could be the reason for the <div> style on the webpage not changing?

I'm currently working on a Django project where I've encountered a challenge. I have div containers with dynamic IDs, where the ID is fetched from the database and automatically injected into the HTML. Here's an example of how the dynamic I ...

javascripthtmldjango

Changing pricing on pricing table with a click

Looking to implement a price changing button that functions similar to the one found at this LINK: If anyone knows of any JavaScript or other solution, please provide me with some guidance. Thank you in advance. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using AngularJS to link ng-include in an ng-view HTML file

Currently, I am diving into AngularJs while also investigating the creation of a viral movie website for the new x-men film. The site in question is Trask Industries (http://www.trask-industries.com/#/innovation), where the navigation system seems to dynam ...

javascripthtmlangularjstemplatesng-view

AngularJS: Issue with JQuery Slider not Updating Scope Value

I am currently working on a project using AngularJS and I have integrated a jQuery slider into it. However, I am facing an issue where I need to change the value of a select box which is defined in a $scope array, but the functionality is not working as ex ...

javascriptjqueryhtmlangularjs