Changing the font family for Bootstrap Glyphicons on a button

I have recently started using Bootstraps Glyphicons and encountered an issue while trying to insert text inside a button with a glyphicon icon:

<button type="button" class="btn btn-default pull-left" data-toggle="collapse" data-bind="attr:{'href':'#'+'TableA'}">
     <span class="glyphicon glyphicon-th-list" aria-hidden="true" data-bind="text:' Details'"></span>
 </button>

When I click on the button, it displays a table. However, I want the text to be in Arial font. After editing the bootstrap.css or adding the following code:

<span class="glyphicon glyphicon-download-alt" aria-hidden="true" data-bind="text:' Download', style:{fontFamily: 'Arial'}"></span>

The font of the text changes to Arial but the glyphicon icons disappear. What am I missing here? Is there a way to change the font-family of text inside a button with a glyphicon icon?

jqueryhtmlcsstwitter-bootstrapfonts

Answer №1

By simply expanding the short <span/> definition to the complete one (<span></span>), the font issue was resolved.

Here is the original version with an invalid font:

        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-send"/>
            &nbsp;Send message
        </button>

And now, after fixing it:

        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-send"></span>
            &nbsp;Send message
        </button>

It's odd that such a simple change made a difference for me...

Answer №2

To modify the font of a specific text, consider placing it within a span element. Then apply a custom class or id to the span and adjust the font-family property in your CSS file to achieve the desired font style without affecting the Glyph.

/S

Answer №3

To easily achieve this, simply utilize the following code:

<button type="button" class="btn btn-default pull-left" data-toggle="collapse" data-bind="attr:{'href':'#'+'TableA'}">
     <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>&nbsp;
     <span style="--your style--">Download</span>
 </button>

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

I am currently working on adjusting the first two columns of the table, but I am encountering some issues with

I have successfully fixed the first 2 columns of a table, but now there is an extra row showing up in the table header. .headcol { position:absolute; width:7em; top:auto; left: 0px; } .headcol2 { position:absolute; width:15em; top:auto ...

htmlcss

Does the Parent Tag style override the child tag style when hovering?

I am currently dealing with some style issues. How can I apply the styling of the parent tag to the child tag when hovering over it? Let's illustrate this with a simple example. .outer:hover { background: yellow; z-index: 1; position: relativ ...

htmlcss

Changing time format from ISO time to short time in JavaScript

I am working on an ajax call that retrieves a time in the format 16:06:59, and I need to convert it to 4:06 PM. var mydate = obj[0].time; The variable mydate contains 16:06:59, but when I try to use it with var date = new Date(), it returns today's ...

javascriptjquery

Unable to include an additional parameter within a JavaScript function

I'm having trouble adding a parameter to the Openpopup() function - every time I try, I get an error. Can someone help me out with this? Thanks in advance. return "<a onclick='return Openpopup()' class='btn btn-info btn-lg clickBtn& ...

javascriptjquerycssasp.net

Safeguard your contact information on the screen

On my classified website, I have concerns about the contact numbers being displayed as plain text in the product details page. This makes them visible to search engines. Is there a way to protect or display phone numbers as images to keep them hidden fro ...

javascriptphphtmltwitter-bootstrap

carousel with a table nestled within

As a beginner in web development, I am faced with the challenge of displaying a table with more than 8 columns, containing lengthy data, on a small screen. To address this issue, I have devised an alternative layout. In this new layout, the two rightmost ...

jquerytwitter-bootstrap-3

The Year as a Reference Point

I came across an interesting issue while working with dictionaries and JSON in sessionStorage. Initially, I had a dictionary structured like this: "name" : { "2016" : { "1" : "info" } } After successfully adding it to sessionS ...

javascriptjqueryjson

Could using an image defer script instead of a lazy image script result in an undefined offset error?

To enhance the pagespeed of my website, Pagespeed Insight recommends using deferred images instead of lazy jQuery images. In an effort to follow this advice, I made adjustments based on suggestions from another source. Read more on stackoverflow I utiliz ...

javascriptphpjqueryimageopencart

Interacting with JSON API data in real-time using AJAX and the power of JQuery

I'm currently working on displaying data dynamically from an API, and everything is functioning well except for the "Next" and "Previous" links. I can't seem to get them to update the value count in the search bar. My problem lies in executing my ...

javascriptjqueryjsonajax

Encountering difficulties with image processing on a web page

Recently, I've been experimenting with uploading an image and converting it to a grayscale version on my webpage. Oddly enough, the javascript code works perfectly when tested locally but fails to generate the grayscale image once integrated onto the ...

javascripthtmlimage-processing

What is causing the extended wait times for ttfb when utilizing Local IIS?

Despite consistently receiving performance test results of around 50ms on my server, the response times for calls to controller methods in my C# code using AngularJS (1.4) or jQuery (1.9.1) are varying greatly. Sometimes the data is returned in less than 1 ...

c#jqueryangularjsiislocalhost

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

javascripthtmljsonnode.jsajax

What could be the reason my CSS and Javascript animation is not functioning properly?

Currently working on creating a dynamic animation menu using CSS and Javascript, but encountering some issues. The concept involves having a menu with initially hidden opacity (using CSS), which becomes visible when the hamburger menu is clicked, sliding i ...

javascripthtmlcsstailwind-css

How can you stop previously stored information from being displayed when clicking on Json?

I'm facing a simple issue with JSON data Below is the JSON code I am working with: { "id" : "1", "name" : "test1" }, { "id" : "2", "name" : "test2" }, { "id" : "3", "name" : "test3" }, { "id" : "4", "name" : "test4" }, { "id" : "5", "name" : ...

phpjqueryjsonajax

Can you please highlight parts of the text and provide dialogue with additional information?

I am currently enhancing my blog and looking for a way to implement JavaScript functionality that will help highlight specific parts of my text and provide additional information, like: I am currently working on my laptop When the user clicks on "lapto ...

javascriptjqueryjquery-ui

What is the best way to add a CSS link if a request is not made using AJAX?

My webpage, 'foo.html', retrieves data from a database using AJAX ('ajax.html?options=option1') to populate a table. The table is styled nicely with CSS that is linked to 'foo.html'. However, I also want the ajax.html page to ...

htmlcssajax

The font color in Bootstrap is set to be lighter than the background color

Bootstrap has made great improvements in displaying navbar item colours that blend well with the background colour of the navbar. Can we apply a similar technique to body text as well? For example, if the container background is purple, can we have the t ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

What are your thoughts on using image maps with CSS?

My images are also links, and the code looks like this: <a href="../www.google.com"><img src="pages/squirrely.png" /></a> While they function properly as links, I want them to only be clickable if you click on the central part of the im ...

htmlcssimagehyperlinkimagemap

Changing the Div heights in Material UI with grid layout customization

I have a project that requires me to implement material-ui. Is there a way I can adjust the width and height of the div containing the "Sign In With" text (as shown in the first image) to bring the buttons closer to the text? Transformation from this: ht ...

javascriptcssreactjsmaterial-uistyled-components

Is there a way to create more space between the cards in my project?

Could someone help me with separating the cards in my HTML project? I'm new to coding and struggling with this. The cards are too close together for my liking, is there a way to adjust the spacing? Below is the code I currently have: * { box-sizin ...

htmlcss