Bootstrap icon issue: square displaying instead of the intended icon

I am currently in the process of creating a responsive website using Bootstrap 3. I have successfully downloaded and imported Bootstrap 3 into the root directory of my website.

However, I have encountered an issue where the icon does not display correctly on smaller screens:

Here is a snippet of my code:

<!DOCTYPE html>
<html lang="lt">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/styles.css">

    <script src="../js/jquery-2.1.1.js"></script>
    <script src="../bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
    <script src="../js/script.js"></script>

    <title>
        title
    </title>
</head>

<body>
    <header class="top" role="header">
        <div class="container">
            <a href="../aplikacija/app.html" class="navbar-brand pull-left">
                Application
            </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="glyphicon-align-justify"></span>
            </button>
            <nav class="navbar-collapse collapse" role="navigation">
                <ul class="navbar-nav nav">
                    <li><a href="../aplikacija/app.html">APP</a></li>
                    <li><a href="../ux/ux.html">UX</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div id="app" class="content">

    </div>

</body>

</html>
javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer №1

Make sure your span with the glyphicon has this specific class: 

glyphicon glyphicon-align-justify
, not just glyphicon-align-justify

Answer №2

It is recommended to avoid using align justify as a class within the span element. Instead, display the glyphicon and justify it in an external div.

<div class="text-justify">
     <span class="glyphicon glyphicon-align-justify"></span> 
</div>

For more information, visit http://getbootstrap.com/components/#glyphicons-how-to-use

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

Tips for creating a vertical drawer using jQuery and CSS

Hello, I am currently working on developing a drawer component using Ember.js. If you want to view the progress so far, feel free to check out this jsbin http://jsbin.com/wulija/8/edit My goal is to have the drawer look like the following initially: +--- ...

javascriptjqueryhtmlcss

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

Basic math tool using JSP/Servlet combination and Ajax

I have a follow-up question to my previous inquiry on Stack Overflow. I believe this topic deserves its own discussion due to the thorough response I received. My goal is to develop a straightforward calculator using JSP. The calculator will include two t ...

javajavascriptajaxjspservlets

Accessing table cell value when clicked using JavaScript or jQuery

I am currently working on an ASP.NET MVC application where I have a table displaying records from the database in razor code. My goal is to extract the record ID "FeeZoneID" from a cell value when the delete link in the last column is clicked, and then t ...

javascriptjqueryasp.net-mvcrazor

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...

javascripthtmljquerycssowl-carousel-2

Can we modify a currently active document within MongoDB?

Is there a more efficient way to achieve the same functionality in JavaScript? I have to find a user, validate their password, and then update their document. Can I optimize this process by reusing the already retrieved document (stored in var doc) for up ...

javascriptmongodb

How can I ensure that the state is only updated after the map function has finished executing in React?

I am encountering an issue with updating the state after mapping over an array of ids using an async function. The goal is to store the result in newArr and then update the state via setState. However, the state is being updated before the mapping operatio ...

javascriptreactjsreact-nativeasynchronousasync-await

Creating a promise to write data to a file

When executing the function, it creates a series of files but fails to write data to them. Strangely, omitting Promise.all at the end and not resolving the function actually results in the data being written to the files. It's puzzling that no matter ...

javascriptnode.jses6-promisefs

When trying to fetch JSON data, the outcome is two pending promises: [ Promise { <pending> }, Promise { <pending> } ]

I am struggling to fetch the JSON data from the API endpoint below: https://api.hatchways.io/assessment/blog/posts When using node.js and making HTTPS requests, I keep getting an array of [ Promise { }, Promise { } ]. The challenge is that I can only se ...

javascriptnode.jsexpress

Processing made easy with jQuery

In my HTML page, I have multiple rows that represent records from a database. Each row contains input fields and a link at the end. When I click on the link, I need to capture the values of the input fields within the same row. Here is an example of the H ...

javascriptjqueryhtml

Transfer the updated variable from a static JavaScript file to Next.js

I am facing a challenge with a conditional render in my component. I am unable to display the value of a variable. In one file, I have all my functions that I export in index.js import FunctionServices from "../services/functionServices" export ...

javascriptreactjsnext.js

Exploring AngularJS's Unique Features: Isolated Scope and Controller Connection

Currently, I am diving into Angular and endeavoring to develop a Phone Message Log application utilizing directives. The concept is simple - the user inputs a message, clicks a button, and it gets displayed in a "Message" log below. The challenge I'm ...

javascriptangularjs

Creating a direct connection between a parent node and all of its children in OrgChartjs

Can I connect all children directly to one parent in Balkan OrgChart.js? This is my starting point based on the documentation of OrgChart.js. window.onload = function () { OrgChart.templates.family_template = Object.assign({}, OrgChart.templates.ana); ...

javascriptorgchart

Combining strings with objects in Javascript: A step-by-step guide

In the code snippet provided, I am combining variables to create a path to another existing object and its attribute. The issue is that I always receive a string, but I would like to somehow convert it into an object. // SET CUSTOM CONTENT FOR COLUMN IF ...

javascriptarraysjsonstring

Effective implementation of the useReducer hook across various React components to manage form state

My current project is proving to be quite challenging as I navigate through the step-by-step instructions provided. Initially, I was tasked with creating a BookingForm.js component that houses a form for my app. The requirement was to utilize the "useEffec ...

javascriptreactjsreact-hooksfrontendjsx

Utilizing Javascript within a PHP while loop to showcase map markers

Is there a way to display multiple database entries in a loop and show them as markers on a map like this: https://i.stack.imgur.com/SwaGP.png I am struggling with looping through JavaScript in PHP to display multiple markers. Is it possible to achieve t ...

javascriptphp

Guide to submitting a form with an image upon pressing a button

I am working with the following HTML structure: <form id="form" enctype="multipart/form-data"> <div class="row"> <div class="col"> <div class="mb-3"> ...

javascriptjqueryajax

The jQuery plugin is not functioning properly on the subdomain

Encountered an issue where a jQuery plugin is not loading in Chromium for a peculiar reason. Interestingly, the plugin loads fine when accessing the page through the root domain but fails to load when accessed via a subdomain in Chromium. However, everyth ...

javascriptjquerysubdomainchromiumtampermonkey

What is the process of utilizing marked plugins within a Vue3 project?

I attempted to integrate the marked plugin into my Vue.js applications. After installing [email protected], I did not encounter any issues during compilation. However, when I viewed the contents in the browser, nothing appeared. My Vue project was built u ...

javascriptvue.jsvuejs3javascript-marked

What is the hostname that npm install directs to?

My task is to set up multiple Node.js packages using npm on a standalone server that does not have direct internet access. I am able to specify an IP Address and port for access. When executing 'npm install' from the command line, where can I f ...

javascriptnode.jsnpm