Difficulty in displaying Font Awesome Unicode on website

I am struggling to populate a list with Font Awesome icons 4.7.0 in my HTML code using Bootstrap. Strangely, only the first icon is displayed while the rest remain invisible.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group" style="margin-bottom:9%">
  <div class="input-group-append" style="width: 40%;">
    <select class="form-control fa" name="selectableList">
      <option class="fa fa-search" value="0">&#xf002;</option>
      <option class="fa fa-equals" value="1">&#xf52c;</option>
      <option class="fa fa-not-equal" value="2">&#xf53e;</option>
      <option class="fa fa-spell-check" value="3">&#xf891;</option>
      <option class="fa fa-remove-format" value="4">&#xf87d;</option>
    </select>
  </div>
  <input class="form-control" type="text" name="textInput" />
</div>

https://jsfiddle.net/eliasvargasloyola/a76Lzu51/4/

Any insights on why only the first icon is visible and the others are not showing?

Best regards.

csstwitter-bootstrapbootstrap-4iconsfont-awesome

Answer №1

Consider using Font Awesome 5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group" style="margin-bottom:9%">
  <div class="input-group-append" style="width: 40%;">
    <select class="form-control fa" name="selectableList">
      <option class="fa fa-search" value="0">&#xf002;</option>
      <option class="fa fa-equals" value="1">&#xf52c;</option>
      <option class="fa fa-not-equal" value="2">&#xf53e;</option>
      <option class="fa fa-spell-check" value="3">&#xf891;</option>
      <option class="fa fa-remove-format" value="4">&#xf87d;</option>
    </select>
  </div>
  <input class="form-control" type="text" name="textInput" />
</div>

Answer №2

Consider using the following Font Awesome link for assistance:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="input-group" style="margin-bottom:9%">
      <div class="input-group-append" style="width: 40%;">
        <select class="form-control fa" name="selectableList">
          <option class="fa fa-search" value="0">&#xf002;</option>
          <option class="fa fa-equals" value="1">&#xf52c;</option>
          <option class="fa fa-not-equal" value="2">&#xf53e;</option>
          <option class="fa fa-spell-check" value="3">&#xf891;</option>
          <option class="fa fa-remove-format" value="4">&#xf87d;</option>
        </select>
      </div>
      <input class="form-control" type="text" name="textInput" />
    </div>

Answer №3

Appreciate everyone for sharing their insights, I found the solution proposed by User863 to be quite helpful.

For those unable to update the Font Awesome version, there is an alternative approach using unicode symbols.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group" style="margin-bottom:9%">
  <div class="input-group-append" style="width: 35%;">
    <select class="form-control fa" name="searchTypeCampaing" style="font-size: 18px;font-family: Arial, FontAwesome;font-weight: bold;">
      <option class="fa fa-search" value="0">&#xf002</option>
      <option value="1">=</option>
      <option value="2">&#x2260;</option>
      <option value="3">&#x2208;</option>
      <option value="4">&#x2209;</option>
    </select>
  </div> <input class="form-control" name="campingTXT" type="text">
</div>

Visit here for more details.

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

CSS dropline menu

I am working on customizing a CSS dropdown menu for my website. My goal is to have the homepage aligned to the left side of the page instead of the center. Below is the style sheet and the div tags I am using for the dropdown navigation bar: ul, li, htm ...

htmlcssasp.netdrop-down-menu

Is it achievable to dynamically modify the style URL in an Angular component based on certain conditions?

element: I am working with two different CSS files, one for Arabic layout and one for English layout. I am wondering if it is possible to conditionally change the style URL in the component. Is this feasible? ...

cssangulartypescript

Update icon according to the JSON properties

I've been working on this map and I'd like to make a change. Here's the link to the map: My goal is to update the icon that appears in the top-right corner infobox (when selecting a route) based on the properties of the JSON file (specifica ...

jsoniconsleaflet

Ways to align content in the center using Vuetify3

I have a component positioned at the top of the page, but I would like it to be centered instead. https://i.sstatic.net/wSFBP.png Something like this: https://i.sstatic.net/rfqAB.png Here is my current code: <template> <v-container class=" ...

cssvue.jssassvue-componentvuetify.js

Exploring the differences: Bootstrap-Vue versus Bootstrap 4

After utilizing Vuejs to develop my frontend, I am now faced with the task of styling it. In my research, I stumbled upon Bootstrap-vue. I am wondering which option would be more beneficial - using Bootstrap 4 or Bootstrap-vue. Are they essentially the s ...

twitter-bootstrapvue.jsbootstrap-4bootstrap-vue

What is the best way to eliminate the extra space above a span when the parent element's font size is very large?

Dealing with a situation where the parent DOM-element has a large em-value which results in all inline child elements having a significant margin above them despite their smaller font-size: Here is the source (http://jsfiddle.net/rapik/w87m7/2/): <div ...

htmlcssfont-size

What is the best way to combine height and min-height in order to ensure that a div always extends to the bottom and keeps

I've tried multiple suggestions without success so far. In my website, I have a main section with white background centered on the page. It stretches nicely to the bottom using flex. See image: https://i.sstatic.net/RmJ2o.png However, there's a ...

htmlcssheight

Is it possible to decrease the size of a div by scrolling both vertically and horizontally?

Can a div's height and width both be reduced at the same time while scrolling down a page? Let's say that as the user scrolls, the size of the div changes from 400px by 400px to 200px by 200px, all while remaining centered on the page. I've ...

javascriptjqueryhtmlcssonscroll

The presence of inline display causes gaps of white space

Located at the bottom of this webpage is a media gallery. The initial three images comprise the photo gallery, followed by video thumbnails inlined afterwards. However, there seems to be an issue with the alignment of each element within the video gallery. ...

htmlalignmentcss

Customizing Image Layout with jQuery Masonry - Tips for Aligning Images

I've successfully created a jQuery masonry layout that showcases recent posts from various categories on the homepage. However, I'm facing two challenges and seeking help to address them: How do I remove the small white gaps beneath some ima ...

phpjqueryhtmlcss

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

javascriptjqueryhtmlcsssyntax-highlighting

Dynamic height adjustment for Bootstrap right column

I am struggling to create a layout with a right column using bootstrap. I can't figure out how to achieve the desired arrangement shown in this image. https://i.stack.imgur.com/VaIWD.png I have attempted various methods but the right column does not ...

htmlcsstwitter-bootstrap

Adjust color scheme of drop-down menu

Having trouble changing the background color for my drop down menu. I tried to change the color for the sub div but it's not working. Can anyone help me fix this issue? Here is the code snippet: http://jsfiddle.net/3VBQ6/4/ #nav li:hover ul.sub li { ...

javascriptjqueryhtmlcss

What could be causing the CSS border to not show up on the webpage?

I am trying to add a border to the footer, but it seems like something is blocking it from showing properly. Below are the CSS lines I have used: position: fixed; bottom: 0; right: 0; left: 0; clear: both; line-height: 1.36em; padding: 08px 0px 0px; tex ...

css

Sending the Image ID to the URL segment

I'm currently working on a project where I need to implement a functionality that allows users to click a button to load the next image from a database query result. However, I also need this action to redirect to a new page and not disrupt the layout ...

phpjqueryimagetwitter-bootstrapcodeigniter-3

Is there a way to adjust the dimensions of individual pictures?

Dealing with a variety of images within a resizing container can be tricky. I have a solution for adjusting each image to a specific size without affecting the others. Currently, the container's CSS is set to resize images based on browser size: .con ...

htmlcss

ToggleButton4 Framework is a user-friendly tool for creating interactive

I am currently working with Bootstrap 4 to design a toggle button; however, when I click the button, the checkbox does not update, despite the fact that the active class is being applied. Even when I use $('.btn-group-toggle').button('toggl ...

javascripthtmlcsstwitter-bootstrap-4

Revamping the navbar hover effect icon

I am currently working on customizing the navigation bar on my website. I have created a code snippet that adds a small '+' sign next to any link that has sub-options. When the user hovers over the link, the '+' sign changes to a ' ...

htmlcss

Modify the button's color when clicked and add it to an array with JavaScript

I am currently working on changing the color of buttons to indicate a selection. When a button is selected, its value is added to an array. If the same button is clicked again, it becomes unselected and its color reverts back to the original state, with it ...

htmlarraysangularjscss

Switching the background image of a div by clicking on a different div

To start, you can locate all of my code right here. http://jsfiddle.net/yfukm8kh/1/ The issue I'm encountering pertains to the following section. var changePic = function (direction, id, array) { var intID = parseInt(id); var intDir = pars ...

jqueryhtmlcssbackground-image