The Glyphicons in Bootstrap are showing up with incorrect images

After downloading bootstrap 3.3.7, I extracted all the files including css, fonts, and js folders. These were then copied to the respective directories under www/css, www/js, and www/css/fonts in index.html as shown below:

<link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>

To use icons on buttons, the code was as follows:

`<button type="button"><span class="glyphicon glyphicon-ok"></span>Yeah</button>
     <button type="button"><span class="glyphicon glyphicon-remove"></span>Nope</button>
`

However, there was an issue where the icons were not displaying properly for Chinese characters on Android platform, some fancy icons showed up on iOS platform, and no icons were visible on Windows platform.

I attempted to resolve this problem by using npm install bootstrap, but it only added the folders to node_modules without any success in resolving the issue. This is why I avoided using the external link 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
as the application needed to work offline with all necessary files within the project structure.

If anyone could offer assistance in troubleshooting and fixing this problem, I would greatly appreciate it.

ioscsswindowsbootstrap-modalglyphicons

Answer №1

Make sure to review the following code snippet in bootstrap.css and adjust the font folder path accordingly:

    @font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Answer №2

When integrating Bootstrap into your HTML code, it is recommended to remove the www folder and organize the folders (css/js/fonts) in a common hierarchy. This will help streamline your project structure and make it easier to manage.

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

Change the duration of a CSS animation rotation using jQuery and an input range control

I'm trying to rotate an element using the -webkit-animation properties, but I want to be able to control the duration using jQuery and an input range slider. Unfortunately, I'm having trouble getting it to work and I can't figure out what&a ...

jquerycssanimationrotationduration

Guide to aligning a URL in an HTML file

Greetings all, I'm new to HTML and struggling with how to center a URL on my webpage. For example: <a href="http://www.google.com"> Click Here to Open Google </a> I attempted using the tag and the STYLE attribute but without success. ...

htmlcss

Updating the font path for Bootstrap-icons on a static website

I need to update the @font-face src path in my bootstrap-icons to ensure it displays correctly in my index.html My process involves using sass and Laravel Mix to compile to CSS. This is the content of my src/sass/app.scss file: @import "~bootstrap-i ...

htmlcsssassbootstrap-5

Steer clear of overloading a custom UIViewController container with an excessive number of view controllers

I have developed a unique UIViewController container that functions like Flipboard's pages. Users can easily swipe or tap through different "pages" which are essentially child view controllers. While I am confident in the implementation, my main conce ...

iosmodel-view-controlleruiviewcontrolleruinavigationcontrollerviewcontroller

Attempting to isolate just a fragment of the inner content

Option Explicit Sub VBAWebscraping2() Dim IEObject As Object Set IEObject = New InternetExplorer IEObject.Visible = True IEObject.navigate url:="https://streeteasy.com/building/" & Cells(2, 4).Value ...

htmlcssexcelvba

Remove an entry from an Entity in Core Data

I am currently working on a project using Swift 3.0 and I have a core data module that contains an entity named "PlayListDetails". This entity has two sub-elements - playlistName and trackID, where each playlist name is associated with a trackID. My goal i ...

iosswiftcore-dataswift3

Maintain consistent width of a page across different mobile devices

Currently, the content on my page does not have any viewport settings. It is simply using a 25% left and right margin for the entire content area. The issue arises when accessing the page from a mobile device, as the width adjusts to match the screen size ...

htmlcssresponsive-designviewport

Hover over the list item and modify the adjacent submenu

Can anyone assist me with a menu creation challenge? I am attempting to create a menu with submenus that can be opened without the use of javascript or jquery. Is it possible to achieve this using only CSS? <nav id="container"> <ul> < ...

htmlcss

Expand picture when grid is selected

I am facing a challenge with my thumbnail grid. I want to enlarge an image slightly without disrupting the layout of the grid. I have experimented with different approaches, first focusing on displaying the enlarged image and then on maintaining the fluid ...

javascriptjqueryhtmlcss

How to align multiple divs in the center on a single row?

I have created a series of navigational buttons for my website using Photoshop, but I'm facing an issue with centralizing them. When applying various CSS margin or float statements to centralize the buttons, they end up arranged in a 1 x 4 column inst ...

htmlcss

What are the different ways to eliminate the scrollbar in angular, css, js, or html?

I'm a beginner in front-end development and despite searching for a solution, I haven't been able to find an answer. Is there a method to eliminate the scrollbar from my page containing an image? Or are there alternative approaches to maintain a ...

javascripthtmlcssangularfrontend

personalized slider interface for iPhone

I'm currently working on creating an iPad application that requires users to select a specific data interval using a UISlider. The slider needs to have two slider buttons, allowing users to easily manipulate and set the range they wish to view or modi ...

iphoneiosipadios5ios4

How to Solve the Frustrating Problem of Ensuring Page Content 100% Height of Document

Currently, I am in the process of creating the second version of my new web app called Trekeffect. My main goal is to ensure that the interface content takes up 100% of the page's height. However, despite my best efforts, I haven't been successfu ...

htmlcss

Trouble with NSString comparisons?

This Question Might Have Already Been Asked: IF clause is not validating NSString function return? The task at hand involves fetching items from an RSS feed and categorizing them into arrays based on their type. However, there seems to be an issue whe ...

iphoneobjective-ciosrssnsstring

Incorporating various elements within a single column of a table

I have been attempting to include multiple table cells elements beneath each of my heading cells, but I am facing issues in getting it to work properly. For better understanding, this is a screenshot: https://i.sstatic.net/kg2XR.png My goal is to have o ...

htmlcss

Increase the gap between vertically aligned columns in Bootstrap 4 by adding spacing

Managing vertical spacing between columns that switch from horizontal to vertical at breakpoints can be challenging. While there are solutions available when dealing with forms, applying them to multiple columns wrapping in a row can be tricky. I have atte ...

htmlcssbootstrap-4twitter-bootstrap-4spacing

How can custom selectors be created in LESS?

Let me provide an example of my desired approach. :all() { &, &:link, &:visited, &:active, &:focus } The concept above involves a 'custom selector' that encompasses all pseudo-classes of an anchor tag, e ...

cssless

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

htmlcss

Utilizing Material UI tabs panel with customized CSS styling

Having trouble changing colors and CSS in the TAB PANEL using material-ui. Any tips or suggestions? :( It seems like useStyle and theme functions are not working as expected. I was able to modify other properties like scrollable, but colors seem to be fix ...

cssreactjsmaterial-uicss-tablesreact-css-modules

What is the functionality of bootstrap colors?

Recently, I've been practicing my skills with Bootstrap, and I'm determined to understand all aspects of the code. However, one thing that's currently puzzling me is the navbar colors. When I apply the navbar-dark class, instead of displayin ...

htmlcssbootstrap-4