Displaying Empty Boxes using Font Awesome

I was able to show Font Awesome properly before, but now it's not working even though I haven't made any changes. I've attempted various solutions but nothing seems to be fixing the issue. My goal is to display it as a placeholder.

Below is my code (HTML / CSS):

input {
  font-family: 'FontAwesome';
}
<!-- included -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<input id="user" type="text" class="form-control" placeholder="username&#xf007;"/>

Any ideas on what could be causing this issue? Appreciate your help in advance!

htmlcsstwitter-bootstrapfont-awesomebootstrap-4

Answer №1

The issue with the empty box displaying is due to the character (&#xf007;) not being available in the font family of Bootstrap. To resolve this, you need to override the default font-family of Bootstrap by either using !important on the font-family rule or specifying a more specific CSS rule using a class, for example:

input {
  font-family: sans-serif, 'FontAwesome'!important;
}
input.more-specific {
  font-family: sans-serif, 'FontAwesome';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- input elements -->
<input id="user" type="text" class="form-control" placeholder="username &#xf007;"/>
<input id="user" type="text" class="form-control more-specific" placeholder="username &#xf007;"/>

To simplify the process, you can apply the CSS class .fa directly to the <input> element like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet>

<!-- input element -->
<input id="user" type="text" class="form-control fa" placeholder="username &#xf007;"/>

Answer №2

Your HTML code should include the following line to load FontAwesome. You're on the right track, great job! :)

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

To resolve the font awesome issue, update the input box markup as follows:

<div class="input-group mb-2 mb-sm-0">
  <div class="input-group-addon"><i class="fa fa-user"></i></div>
  <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
 </div>

I hope this information proves helpful. :)

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

Navigating the rollout of a fresh new design

When implementing a new design on a website, how can you bypass the need for users to clear their browser cache in order to see the updated changes? Is there a way to automatically refresh the cache once a new version of the website is uploaded, or are th ...

javascriptphphtmlcssapache

Firefox with Ajax bug bar

I have encountered an issue with my Navbar specifically on Firefox. The problem I am facing is that the Navbar is flickering, constantly growing and shrinking. Interestingly, this issue does not appear when using Chrome or Opera. I'm curious to know ...

htmlajax

Wordpress Custom Post Type with a Sleek Slider Plugin

I am currently using a static slick slider to display testimonials on my website. Instead of hardcoding the testimonials, I want to fetch them from a WordPress custom post type that I have created. Can someone guide me in the right direction: <section ...

phphtmlwordpress

Not compatible with certain browsers, scrollable wrapper in fullscreen

I am looking to create a unique layout with a fullscreen div on top of a footer. The main element (#wrapper) should have a fullscreen background image and be scrollable to reveal the footer underneath. Check out my code on JSFiddle: https://jsfiddle.net/t ...

htmlcss

"Stylish hover effect for list items using CSS arrows

I'm struggling with creating a list menu that has a 1px border and spans the entire width. Here is what I have so far (image 1): https://i.stack.imgur.com/y3EDP.png The tricky part is making it so that when the mouse hovers over a menu item, someth ...

css

What is the best way to position a button at the bottom of an image?

I am facing an issue with the following code snippet: * { box-sizing: border-box; } .wrapper { position: relative; /* border:1px solid blue; */ width: 250px; } .text { position: absolute; border:1px solid red; bottom: 0px; ...

css

Attach a child element to the bottom of its parent div when the parent div reaches the bottom

I'm looking to make a child div stick to the bottom when the parent div reaches the bottom of the browser window. Note: This behavior should only occur when the parent div is pushed down, not when the page is scrolled down. For instance, in my demon ...

javascriptjqueryhtmlcss

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

htmlcss

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

htmlcsstwitter-bootstrap

Looking for assistance in streamlining my jQuery code for bootstrap tab pane. Any takers?

Having trouble setting a specific tab as active when navigating from different links. I have found a solution, but it involves writing code for each individual tab. Can someone offer assistance in simplifying the code? <table class="nav nav-tabs"> ...

jqueryhtmlcsstwitter-bootstrap

Issue with .get() method in jQuery affecting IE7, IE8, and IE9

While testing the sending and receiving of data to a PHP file using jQuery, I encountered an issue with Internet Explorer (I am using IE9, but I also checked on IE8 and IE7). When I click on one of my divs, I send an "ID" to the server and the PHP file re ...

phpjqueryhtml

Acquiring the PayPal callback variable with PHP

When using PayPal Standard HTML form, upon completion of the transaction, the user is directed to the return URL. To retrieve variables such as the user email, order number, and other available information using PHP, I need to utilize the GET method from t ...

phphtmlpaypalpayment

arranging fashionable divs side by side

I am currently working on a website and I want to include four circles that stand next to each other with a margin of approximately 50px between them. I managed to position one circle correctly, but when I try to add more circles, they do not display prope ...

csshtmlcss-float

Execute the JavaScript [ window:print() ] function once the webpage has finished loading along with any

I am facing an issue with my web page that has around 10 Google Analytics charts. I want to trigger a print dialog box once the page is fully loaded, including all the charts and JavaScript. Currently, the problem is that the print dialog box opens after t ...

javascriptjqueryhtmlprintinggoogle-analytics

Is it possible to submit a form through a JavaScript hotkey?

Here's the current code that I'm working with: <select tabindex="2" id="resolvedformsel" name="resolved"> <option selected="selected" value="yes">resolved</option> <option value="no">not resolved</option> ...

javascripthtmlcssforms

Adjust the class of the iframe element when clicked

I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have: Here is a snippet from my index.htm ...

javascriptjquerycsshtmliframe

Monitor the incoming POST request

Is there a way to monitor incoming post requests in a form? I have the following form: <form method='post'> <input type='text' name'test' /> <input type='submit' name'submit' /> </for ...

phphtmlforms

Every iteration and vertical lines

<?php $arr = range(1,mt_rand(40,120)); ?> <table> <?php foreach ($arr as &$value) { echo '<tr><td>' . $value . '</td></tr>'; } ?> </table> This script generates a sequence of n ...

phphtmlforeach

SVG with complete coverage of width and height

Here's the challenge: create a full window svg image with aspect distortion without using an SVG tag. Why avoid the SVG tag? Because I plan to replace the SVG later on (possibly frequently) and haven't found a simple way to do so. Previous attem ...

csssvg

Ways to showcase database content in ejs or html by utilizing Node.js, MongoDB, and Mongoose

I have successfully set up a Nodejs/Mongo/Mongoose database that can fetch and display data onto a page. However, I am encountering difficulty in displaying the fetched items in HTML, specifically in a table format. Below is the code for creating entries ...

htmlnode.jsmongodbmongooseejs