What is preventing the fontawesome icon from appearing in Chrome and Safari browsers?

Why isn't my fontawesome icon displaying in Chrome and Safari?

I'm using Bootstrap and Fontawesome, but for some reason the icons are not showing up in Chrome and Safari. Here is my code. I can't believe I'm struggling with such a simple task...

<link href="bootstrap.css" rel="stylesheet">
<link href="jumbotron-narrow.css" rel="stylesheet>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"><
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Everything seems correct, so why are the icons still not showing? Can someone please assist me?

  <div class="jumbotron">
    <p><a class="btn btn-lg btn-success" href="http://github.com/" target="blank">GitHub</a>
    <i class="icon-github-alt"></i>
    </p>
  </div>
javascripthtmlcsstwitter-bootstrapfont-awesome

Answer №1

Everything seems to be going well for me - here's a sample:

http://jsfiddle.net/easwee/tmWVz/

Have you ever wondered why the 

bootstrap-combined.no-icons.min.css

file is being loaded?

All you really need are

bootstrap.min.css
font-awesome.min.css

for it to function properly.

Answer №2

If you're working locally and not on a browser, try fetching the files from your hard drive using this method.

<link href="bootstrap.css" rel="stylesheet">
<link href="jumbotron-narrow.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Don't forget to include http: when working locally.

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

Table order is requested, but the index fails to comply

I am facing an issue with sorting and deleting data from a JSON table. Even after sorting the columns, clicking "Delete" removes the wrong entry because the $index is not updated properly. Here is the JavaScript code I am using: $scope.friends = ...

javascriptangularjs

Exploring the child element of the present DOM node within Angular

In my template, I have a code snippet similar to the one below: <button class="btn" > <audio src="mySourceFile.wav"></audio> </button> When the button is clicked, I want to play the audio object. Ideally, I would like to achieve ...

javascripthtmlangulardom

How can methods access variables from the Vuex store during function calls?

Within my Vue.js component, there is a v-select element. Upon user selection in this widget, the toDo function is triggered from the methods block. However, when attempting to access the value of the filters getter within this function, it consistently ret ...

javascriptvue.jsvuejs2vuex

The presentation of the solution alters upon completion of a calculation

If you want to view my jsfiddle, click here The issue that arises when checking the demo on jsfiddle is related to entering a number in one of the text inputs (question 1). Although it performs the calculation correctly, the displayed answer in the column ...

phpjqueryhtml

issues with laravel blade form not redirecting to a specified route

I'm diving into named routing with Laravel 5.5 and encountering an odd issue while trying to handle a form action. Setups and Explanations: I defined my routes in web.php Route::post('questions/save_bulk', 'QuestionsController@sa ...

htmllaravelformslaravel-5

When using the v-for directive with an array passed as props, an error is

I encountered an issue while passing an array of objects from parent to child and looping over it using v-for. The error message "TypeError: Cannot read property 'title' of undefined" keeps appearing. My parent component is named postsList, whil ...

javascriptvue.jsvue-component

Images in a list using Bootstrap are not appearing aligned in a row as

Although it may appear simplistic, as a beginner coder I am struggling to get my code to display properly (I am using bootstrap). The desired result I want to achieve is FLAG languagename FLAG languagename Here is the HTML: <div class=""> <ul ...

htmlcsslist

Activate the child for an update

Welcome! I am a newcomer to Angular and would greatly appreciate any assistance. The parent component of my picker has the ability to create various rules for each option. However, these rules are dynamic and can change frequently. I need to ensure that ...

htmlangulartypescript

Experiencing a mysterious error in Vuex with undefined values while using a getter in a computed property

I've encountered an issue on my Vue.js website where the data is rendering correctly, but I keep receiving an undefined error in the console. The error seems to be related to an axios call I'm making in App.vue to fetch data from my CMS: In App. ...

javascriptvue.jsvuex

Automatically generated list items are failing to react to the active class

I am facing an issue with two divs in my project. The first div uses the Bootstrap class list-group and is populated with a basic example provided by Bootstrap. The second div is supposed to be populated with list-group-items obtained from an AJAX GET requ ...

javascripttwitter-bootstrap

Is it possible to halt the execution of a code or skip the remainder of it if a specific condition is met using jQuery?

Is it possible to prevent a code from completing or skipping the remaining parts based on a specific condition? For example, var stopCode = false; if (stopCode === true) break; .... .... blah blah blah the remaining part of the code .... ... Can this b ...

javascriptjquerybreak

Using AngularJS to Showcase JSON Array

I am currently working with a .json file that contains information about networks, IP addresses, and zones. I am trying to figure out how to display the "ip" array in my .html file. [ { "network":"net1", "ip":[ "19 ...

javascriptjsonangularjs

When you start scrolling down, the JavaScript menu will cleverly disappear, only to re

I am facing an issue with my menu, which is a normal block-displayed div. There is another div with annotation above it. I want the menu to stick to the top as fixed when scrolling down, but immediately hide itself. The goal is for the menu to appear when ...

javascriptjqueryhtmlcss

When the add button is clicked, I would like to implement a feature where a checkbox is added

When the user clicks on the link "출력하기", I want the web page to add a checkbox to all images. I wrote this code, but it's not working. Can anyone help me? This is my JS: $(document).ready(function(){ $("#print").on('click', fu ...

javascripthtmlimagecheckbox

What is the most effective method for implementing multiple textures in three.js?

After recently transitioning to three.js as my renderer, I am eager to establish a texture mapping system. However, determining the best practice for this task is a bit uncertain for me. Here is the scenario I am dealing with: My levels consist of numero ...

javascriptthree.jsgame-enginetexture-mappingnode-webkit

Suggestions for Implementing a Smooth Login Experience in React Native

As a newcomer to the world of react-native, I am facing a challenge in creating a login feature that interacts with our backend APIs on AWS. The goal is to navigate to the home screen upon receiving a token from the API, while displaying an error message i ...

javascriptreactjsreact-nativereact-redux

Is it possible to detect the status of the parent window (open or closed) within a Django view?

In my Django view, I am faced with the challenge of returning HttpResponse based on the status of the parent window that initiated the current window. If the parent window is open, I need to close the current window and redirect the parent window to a spec ...

javascriptpythondjangohttpresponse

A strange issue with ajax: SyntaxError occurs with an unexpected token "if"

Having an issue with my javascript code: function updatePage() { if (request.readyState == 4) if (request.status == 200) var data = JSON.parse(request.responseText); update_select($('select[name=island_name]'), data); ...

javascriptajax

What guidelines should be followed for utilizing jQuery's Ajax convenience methods and effectively managing errors?

Imagine a scenario where I am trying to mimic Gmail's interface using jQuery Ajax to incorporate periodic auto-saving and sending functionalities. Error handling is crucial, especially in cases of network errors or other issues. Instead of just being ...

javascriptjqueryajax

Adjusting the border color and eliminating the shadow effect surrounding the box

Looking to get rid of the box shadow and change the border color: Tried this CSS code, but no luck so far: .selector.noshadow { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } Any tips on how to remove the shadow and swi ...

htmltwitter-bootstrapcss