Tags for classes are not appearing or being activated on my website

I recently purchased a template from casethemes () and I am experiencing an issue. Despite using the same tags as their demo site, the classes are not being executed properly and appear broken on my website. Could it be that I am missing some necessary libraries for integration? Some of the classes that are not working and displaying broken images on my end but are functional on the demo page include:

<i class="zmdi zmdi-close"></i>

<i class="fac fac-search"></i>

<i aria-hidden="true" class="flaticon flaticon-social-media"></i>

<i aria-hidden="true" class="flaticon flaticon-report"></i>

On my website, it is displayed as shown in this image

On the demo template, it is displayed as shown in this image (you can check the website)

Could you please assist me in identifying and resolving this issue? Thank you in advance.

htmlcsswebbootstrap-4themes

Answer №1

Verify that Font Awesome is being imported correctly

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

Preventing the Rendering of Inline-Block Whitespace in Web Browsers

Essentially, in my attempt to create a four-column layout, I have the following HTML code: <div> <div>A column</div> <div>A column</div> <div>A column</div> <div>A column</div> </div ...

csswhitespacemultiple-columns

Using jQuery to create two identical widgets

Just starting out with JQuery and had a question about a specific problem I'm facing: Imagine you want to include 2 textboxes with datepickers on an HTML page using jQuery UI. Since jQuery works based on "ID" rather than "Class", the following code w ...

htmljquery-uijquery-ui-datepicker

Dealing with customized protocol responses in JavaScript

My web server is set up to return a response like: HTTP/1.1 302 Found message://ActualMessage While this setup works seamlessly for UI clients like Android and iOS, I'm faced with the challenge of handling this case on a web browser. For instance, ...

javascripthtml

Problem with Safari: File downloaded with name "Unknown" due to Javascript issue

After successfully converting my data to text/csv, I can easily download the file in Chrome. However, when attempting to do so in Safari on an iPad or Mac, it opens a tab with the name "unknown" or "Untitled". The code snippet I am using for this is as fol ...

javascriptangularjshtmldownloadsafari

Rotating Cursor during AJAX loading process

I utilize a WebGrid across many of my pages to showcase various products. Within the code snippet below, you can see how an item is added to the database when a user clicks on it: public bool ToCart(int userId, string partNumber, ...

c#jqueryasp.nethtmlajax

Guide on utilizing the History API or history.js to dynamically update the "active" link based on page refreshes and back button presses

Highlighted active links using JS on my website. <script type="text/javascript> $(document).ready(function(){ $("a.nav1").click(function() { $(".active").removeClass("active"); $(this).addClass("active"); ...

javascriptjqueryhtmlhistory.jshtml5-history

Display a pop-up alert following the completion of form validation using JavaScript

I am currently learning JavaScript and working on an enrollment form that requires validating a cellphone number with 11 characters. The issue I'm facing is that every time I hit submit, the page refreshes instead of displaying the validation message. ...

javascriptcssvalidationbootstrap-4popup

What is the best way to align a form control and its label side by side, center them, and then stack them on top of each other when the screen size decreases while keeping them centered

Is there a way to center a form control and its label inline, then have them stack on top of each other (label over input textbox) as the screen size decreases? I am attempting to achieve this using Bootstrap. ...

bootstrap-4

If you click outside of a Div element, the Div element will close

I am looking for a way to implement a function that will hide a specific div when I click outside of its area. The div is initially set to Position: none and can be made visible using the following function: Div Element: <div id="TopBarBoxInfo1" oncli ...

javascriptjquerycsshtml

Ways to rotate just the border without rotating the icon through CSS

I need help with rotating only the border 135 deg on hover, without affecting the icon. Below is the code I am using. Any assistance would be greatly appreciated. Thank you! My html: ` <div class="container-fluid details-section"> ...

javascripthtmlcssbootstrap-4

Restrict the amount of decimal places allowed in input text

Another question on Stack Overflow addresses limiting the number of characters allowed in a form input field. I am specifically looking to restrict the number of digits that can come after the decimal point to 2 digits. <input type="text" maxlength="2 ...

htmlformsinput

Enable content to be displayed when hovering over it with a mouse in

As a newcomer to JavaScript, I am eager to learn how to add an interactive feature to my menu item. I want to create an info box that pops up when the menu item is clicked, and can also be displayed when hovering over it. Below is the script I have so far, ...

javascriptjqueryhtmlcss

HTML element DIV positioned above the iframe

I am looking for a way to automatically place a "PLAY" div above each iframe instead of doing it manually. I have successfully done it manually but I'm not sure how to achieve the same result with a script or using CSS. Below is my HTML markup: < ...

javascripthtmlcss

The grid feature in the Bones theme is malfunctioning and causing issues

I am currently using the Bones theme from Themble, which has a grid system in its design. I attempted to apply this grid system to the header of my website in order to transform menu items into icons on mobile devices and display the full menu on desktop s ...

htmlcssgridmenuitem

What could be preventing my image from displaying in the header section?

Having trouble displaying the image I added in the header section as a logo. The code works for my online course instructor, but no luck for me. I've tried different images and links to no avail. If you would like to take a look at the codes I used, ...

htmlcssbootstrap-5

Ways to hear a variable using Google Translate

We're utilizing HTML5 and Javascript. Imagine we have a list containing the names of all players from Barcelona (for example, name = 'Lionel Messi'). I want to make the player's name audible. To achieve this, I would use: var narrator ...

javascripthtml

Are HTML custom data attributes being included in Google's indexing?

Currently, I am in the process of developing a portfolio module that relies on AJAX, pushState, and hash bangs. Since I am targeting browsers with JavaScript enabled, my main concern lies in the limited capability of HTML custom data attributes for SEO. T ...

htmlcustom-data-attribute

Ensuring uniformity in picture size while uploading images in Angular by resizing and including white borders

Currently, I am working with pictograms and I am looking to showcase all the pictograms that the user has in both grid list and grid tiles formats. However, the challenge lies in the fact that the aspect ratio of the pictograms varies significantly depen ...

htmlcssangular

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

htmlcsshover

Display radio buttons depending on the selections made in the dropdown menu

I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this? .sub{display:none;} <sc ...

javascriptjqueryhtmlcssdrop-down-menu