Transforming the font landscape with Twitter Bootstrap 3's Glyphicons

I have an unordered list with icons styled using Twitter Bootstrap 3.

The Carme font from Google Fonts is used for normal text, and works well in that context.

However, when I add icons to the unordered list using BS3, the font-family of that particular list changes unexpectedly.

Take a look at this FIDDLE for better clarity.

Observe the font-family of both the list items with and without glyphicons.

I am puzzled by this issue..

Any tips or suggestions on how to resolve this would be greatly appreciated.

htmlcsstwitter-bootstrap

Answer №1

Move the icon tag outside of the <a> tag

<ul>
    <li>
        <a href="#"><i class="glyphicon glyphicon-user"></i> One 1</a>
    </li>
    <li>
        <a href="#">One 1</a>
    </li>
</ul>

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

Is there a way to create an image gallery layout similar to Pinterest using CSS?

I am currently developing a dynamic PHP gallery that will feature thumbnails with the same width but varying heights. These thumbnails will be arranged from left to right, so I would prefer not to use a traditional five-column layout. I suspect that achiev ...

javascriptjquerycssgallery

Element positioning in Material UI is fluid and responsive across all devices, with the ability to place elements at

As a novice in layout design, I am currently developing a web application for both mobile and desktop using React and Material UI. My challenge lies in placing the app navigation at the bottom of the screen. The issue arises because the location of the app ...

cssreactjsmaterial-ui

Troubleshooting problems with opening and closing windows in JavaScript

I'm currently facing an issue with managing browser windows using JavaScript. In my proof of concept application, I have two pages - one for login information (username, password, login button, etc.) and the second page is a management screen. What I ...

javascripthtmlxhtmlbrowserdhtml

Adjusting the left and right margins within a Bootstrap row nested inside a card component

I am struggling to adjust the left and right margins for a Bootstrap row inside a card. Below is my CSS code along with some screenshots for reference. <div class="container" style="margin-bottom: -20px;"> <div class=" ...

htmlcssbootstrap-4

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

After finding a solution in this discussion, I successfully managed to 'minify' HTML content. function process_content($buffer) { $search = array( '/\>[^\S ]+/s', // eliminate spaces after tags, except for ...

javascriptphphtmlcsspreg-replace

Lightbox2 is not compatible with Internet Explorer 8

Check out my website: If you click on the image "woman study 01" in IE8, you may notice that the transparent black background doesn't extend all the way down the page. Any suggestions or assistance would be greatly appreciated! I have already experi ...

cssinternet-explorer-8overlaylightbox2

Form-linked Progress Bar

This is a little project I created (for fun and learning purposes, even though it may not be the most optimized solution). If you're interested, here's the link to the code: https://codepen.io/paschos/pen/xxGXMQb I'm currently seeking assi ...

javascripthtmlcssreactjs

Add some TD(s) after the td element

The HTML code I currently have is as follows: <tr> <td class="success" rowspan="1">Viability</td> <td data-rowh="-Checksum">Viability-Checksum</td> </tr> <tr> ...

javascriptjqueryhtml

Enhanced border appears when hovering over the element

Take a moment to visit the following website: Navigate to the Business Lines section and hover over Property Development & Project Management. Notice how the menu changes to double line when hovering. Is there a way to prevent this? I prefer to keep it ...

htmlcss

Prevent the display of hyperlinks in the status bar when hovering over a hyperlink or button

The application I'm working on has a default status bar at the bottom of each screen that displays URLs linked to buttons and icons. For example: https://i.stack.imgur.com/ZFTsp.jpg I am trying to prevent the display of URLs associated with hyperlin ...

javascriptjqueryhtmlhyperlinkstatusbar

What's the secret behind the functionality of this jQuery menu?

As I was browsing the website , I noticed that they have a menu in the top header with links like "Freebies" and "Inspiration". I searched for where the code for this menu is located, but couldn't find it. Can anyone help me locate the code? I' ...

jqueryhtmlfirebug

center a horizontal line using StyledSheets in your project

After drawing a horizontal line, I noticed that it is positioned towards the left side of the screen. I am hesitant to increase its width. Are there any other methods to move it to the center? I attempted wrapping it with another view and using alignConten ...

javascriptcssreactjstypescriptreact-native

Enhancing interactivity with jQuery's ajax event functionality

Alright, let me share my code with you: $("#content_Div").ajaxStart(function () { $(this).css('cursor', 'wait') }).ajaxComplete(function () { $(this).css('cursor', 'default') }); I'm facing a simple is ...

jqueryhtmlcssmouseevent

AngularJS application is throwing an error indicating provider $q is not recognized

Could someone please advise on what might be the issue with my code snippet below: var app = angular.module('app', [ 'angular-cache', 'angular-loading-bar', 'ngAnimate', 'ngCookies', &a ...

javascripthtmlangularjs

Enigmatic blank space found lurking beneath the image tag

Recently, I made a change to the header image on my website. Previously, it was set using <div style="background-image... width=1980 height=350> and now I switched to <img src="... style="width:100%;"> This adjustment successfully scaled do ...

htmlcss

How to Align Items Horizontally in React Material UI Grid for Containers of Varying Item Counts

I've been utilizing the React Material UI Grid System to arrange my elements on the page, which utilizes flexboxes internally. While everything is functioning properly, I'm struggling with horizontally aligning items in containers that have vary ...

htmlcssreactjsflexboxmaterial-ui

Bootstrap 4 alert boxes extend the text to span the entire width of the alert

How can I make the paragraph text span across most of the box width in Bootstrap 4? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJ ...

cssbootstrap-4

Customizing animations for birds

I'm currently in the process of developing a new website. The link to access the site is: One thing I am eager to achieve is having birds from this specific link incorporated into my background: I have attempted various methods without success. If a ...

javascripthtmlthree.jsboids

``Troubleshooting: Problem with Rails checkboxes and error-ridden fields

Hello there! I've encountered an interesting problem that I've traced back to using a custom bootstrap checkbox. Everything works fine, except for when I try to submit the form without checking the checkbox and receive an error message. After thi ...

htmlruby-on-railsbootstrap-4

The white-space property disrupts the normal width of elements

My initial goal was to stack two elements together side-by-side, both taking the full available height. One element has a fixed width of 200px with an image (70px wide) inside, while the other element should only fit one line of text, clipping any overflow ...

htmlcssoverflowword-wrap