What is causing the Font Awesome icons to not display in this HTML code?

Utilizing Font Awesome in HTML is my goal, however, the code snippet provided is not rendering the desired outcome. I have stored the Font Awesome directory within my project folder as well...

<?php
include '../config/sessionhandling.php';
//print_r($_SESSION['userrow']);
$role_id=$userrow['role_id'];

include '../config/dbconnection.php';
include '../model/user_model.php';

$obu=new user_model();
$resultu=$obu->viewUsers();
$nou=$resultu->rowCount();

$resultud=$obu->viewUsersDe("Deactive");
$noud=$resultud->rowCount();
$noua=$nou-$noud;    

$to=date('Y-m-d');
$resultday=$obu->viewLogPerDay($to);
$noday=$resultud->rowCount();

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Faculty Management System</title>
        <link rel="stylesheet" type="text/css" 
              href="../css/layout.css"/>
        <link rel="stylesheet" type="text/css"
              href="../bootstrap/css/bootstrap.min.css" />
<!--        <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">-->
        <link rel="stylesheet" href="../fontawesome-free-5.12.0-web/css/font-awesome.min.css">

    </head>
    <body>
        <div id="main">
           <?php
           include '../templates/header.php'; ?>
            <?php 
            include '../templates/userrole.php'; ?>
            <div id="navigation">
                <div>
                    <ul class="breadcrumb">
                        <li class="active">
           <a href="../view/dashboard.php">Dashboard</a>
                        </li>
                    </ul>
                </div>

                &nbsp;</div>
            <div id="content">
                <div class="row">
                    <div class="col-md-3">
                        <ul style="list-style: none">

                                <li> 
                                <i class="fas fa-user-graduate"></i>
                                <a href="user.php">User</a></li>

                                <li> 
<!--                            <i class="glyphicon glyphicon"></i>-->
                                <a href="item.php">Faculty</a></li>

                                <li>
<!--                             <i class="glyphicon glyphicon-bold"></i>-->
                                <a href="stock.php">Department</a></li>

        

Answer №1

Consider including a type attribute in your link element like so:

<link rel="stylesheet" href="../fontawesome-free-5.12.0-web/css/font-awesome.min.css" type="text/css" />

Answer №2

Don't forget to verify your font awesome css link with this method

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>

Answer №3

Leverage Content Delivery Networks (CDN):

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" crossorigin="anonymous">

Answer №4

One important thing to note is that font awesome offers a CDN that should be utilized to simplify managing updates.

Additionally, take a look at this discussion for a more efficient way to include files on a website for optimal user experience. Remember, PHP operates server-side, so directly including links in the head leaves rendering up to the user's browser, potentially slowing down page load times. While this may not be significant for a single file, it can cause unnecessary delays with multiple files. Utilizing PHP for server-side scripts helps maximize your server's capabilities effectively.

The essence of the discussion emphasizes:

  1. Defining the stylesheet and its variables
  2. Utilizing output buffering for proper loading

For WordPress users, a custom "hook" called "enqueue" can be added to functions.php for a similar outcome. Check out the FAQ on Wordpress wp_enqueue_style() functions for more information.

Answer №5

Give this code snippet a try. Simply switch out the fas fa-github with fab fa-github.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">



<div class="jumbotron">
  <h1 class="display-4">Henrique Borges</h1>
  <p class="lead">Experienced Programmer and Web Designer.</p>
  <hr class="my-4">
  <p>It utilizes utility classes for typography and spacing to adjust content within the container.</p>
  <p class="lead">
    <i class="fab fa-github btn btn-dark btn-lg" href="#" role="button"> Github</i>
  </p>
</div>

Answer №6

Make sure to include the CDN link in the head tag :

<link type='text/css'  href='the font link' >

Remember to always include the configuration files of your framework or the CDN link in your HTML for each project. It's an important step not to be overlooked.

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

Javascript: struggling with focus loss

Looking for a way to transform a navigation item into a search bar upon clicking, and revert back to its original state when the user clicks elsewhere. The morphing aspect is working correctly but I'm having trouble using 'blur' to trigger t ...

Unable to access accounts due to malfunctioning login feature in PHP

Hey there, I'm facing a bit of an issue with this code. It works perfectly on my local WAMP server, but when I uploaded it to a GoDaddy-hosted server, it stopped working. Surprisingly, it worked on another server from a different hosting company. I&ap ...

Struggling to integrate font-awesome into my Vue.js project

Observation: The stars should be displayed using the Font Awesome font. Issue: An error font is being displayed instead of Font Awesome, indicating that it is not being loaded properly. Hello. I am encountering problems with including Font Awesome in my p ...

Storing External Cached Data

I am facing an issue while trying to save cached webView files to a specific directory on the SD-card. I have set up HTML5 and a cache-manifest file on the server. Despite using the setAppCachePath method to designate an external directory on the sd card, ...

What are the style attributes that can be edited in each ant design component?

My goal is to customize an ant design card by adding a border only on the left and right sides of the card. The bordered attribute in the card component seems to either remove the entire border or display it on all sides. I am looking for a way to specif ...

"Learn the step-by-step process of generating a transcript with a WebVTT file in JWPlayer

We have integrated JWPlayer into our website and are now looking to add transcript captioning. I have attempted to create a sample application using regular HTML code, but have not been successful. Despite reviewing multiple tutorials, I was unable to ach ...

Push the accordion tab upwards towards the top of the browser

I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...

Guide on implementing ng-options and ng-init functionalities in AngularJS

I need help with displaying the ProjectID's in a drop-down list format where users can select one value. Can you provide an example on how to achieve this? [ { "ProjectManagerID": 4, "ProjectID": 4, "ResourceID": 4, "Deleted": false ...

Tips for implementing a sticky sidebar in HTML5 with jQuery

I currently have two files: index.php and aside.php. I've already created the contents of aside.php. Now, I want to make the aside page sticky. To achieve this, I referred to the following link: http://codepen.io/pouretrebelle/pen/yvcBz My struggle ...

PHP Question: Why are variables within <?php ?> not accessible within if/else statements?

I'm currently working on a basic program that involves the user inputting a number, which is then processed to generate a series of random similar numbers. After this step, the program prompts the user to select the correct variable, which will be va ...

What are the steps to convert a canvas element, using an image provided by ImageService as a background, into a downloadable image?

I've been working on an app that allows users to upload an image, draw on it, and save the result. To achieve this functionality, I'm using a canvas element with the uploaded image as its background. The image is retrieved through ImageService. B ...

How would you utilize jQuery to access the "option" array of a select control with the attribute of multiple=true by utilizing the find() method?

When using jquery, I am attempting to access selected items from a select control that has multiple=true. My goal is to reference them by name criteria and then iterate through the list. Below is my current code snippet: var currentRow = $(this); // sele ...

Fetching the jquery variable within an HTML document: A step-by-step guide

Here is the content of my check.js JavaScript file, which includes a function: function fun2(userid) { $.ajax({ type: 'POST', url: 'ex.php', data: {userid: userid}, success: function (data) { ...

Is there a way to dynamically alter the content depending on the index of the current slide using swiper.js?

Hi, I am new to utilizing the Swiper framework and so far, it has been one of the best sliders I have ever experienced. Currently, I am trying to establish a connection between 2 div tags - one tag holds the content of each slide while the other tag contro ...

Creating an animated border that fades to transparency using keyframes

I am attempting to create a simple animation of a circle with a border that transitions from red to a transparent color. My approach is to initially set the color to red and then animate it to transparent using keyframes as follows: .pulse{ margin: 20 ...

Row within a table displaying link-like behavior

Here is the code I'm currently using: $('.table-striped tr').click( function() { var link = $(this).find('a').attr('href'); if(link != 'undefined') { window.location = link; } }).hover( func ...

Compiling a list of products, but the user interface needs some adjustments

Currently, I have designed a product list menu that includes a hover dropdown feature. This means that when a user hovers over a specific menu item, the corresponding list will automatically appear. However, I am facing two issues with this setup. Firstly, ...

The Zurb Foundation has a multitude of redundant CSS entries

I have been utilizing Zurb Foundation for a while now, with a bower + compass setup as outlined in the documentation here. Recently, I encountered an issue where a specific page was loading slowly. Upon investigating, I discovered that there were numerous ...

Tips for preserving line breaks when sending a message through the mail

Hi, I'm currently facing an issue: I am trying to send text from a textarea using POST to a PHP script that will write it to a file and display it on the website. However, when I do this, the line breaks disappear and the displayed text ends up lookin ...

Struggling to display a function's output on a separate web page within a flask application

After spending close to 10 hours on this, I find myself stuck. My restaurant search app is functioning perfectly when I print the output to the terminal. However, I can't seem to figure out how to display it on a new page. Here's a snippet of my ...