What is the method for changing the icon color to dark in Twitter Bootstrap?

I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make it dark.

<ul class="nav nav-tabs">
<li class="active">
    <a href="#">
        <i class="icon-fire"></i> Newest</a>
</li>
<li>
    <a href="#">
        <i class="icon-star"></i> Most popular</a>
</li>
<li>
    <a href="#">
        <i class="icon-heart"></i> Etc.</a>
</li>
</ul>
csstwitter-bootstrapicons

Answer №1

If you want to customize the style of your icons, consider adding this code to override the .active styling: 

background-image: url("../img/glyphicons-halflings.png") !important;
(you may need to adjust the path).

Currently, there are only two color options available for the icons: the default dark gray and white. It is not possible to change the color to anything other than these two options as they are extracted from a static sprited png.

To gain more flexibility in controlling the size and color of your icons, check out Font Awesome. It is designed to seamlessly integrate with Bootstrap and provides full control over icons stored in vector format as a font.

Answer №2

If you're looking to customize the color, it's as easy as navigating to your bootstrap.min.css file.

Once there, locate the selector .bs-glyphicons li:hover.

You can then adjust the 'color: #fff' to your desired color, such as 'color : #000'. Feel free to choose any color that suits your project.

I've personally tried this approach in one of my projects and can confirm it works flawlessly. Hopefully, this solution proves helpful for you too.

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

Don't pay attention to CSS that is outside of the div

Currently, I am attempting to populate a div with templates in order to preview them. These templates are sourced from a database and configured using php. My issue lies in the fact that certain entries consist of entire websites (complete with a head and ...

htmlcss

Avoid using the FONT tag with the execCommand function

Is there a way to hide the next element using execCommand configuration? Font Tag <font color="xxxxxxx"></font> I am facing an issue while creating a simple editor for a project. I am struggling with CSS formatting and the font tag is not he ...

htmlcssfonts

The divs with the specified class are not applying the desired styles to my document. However, the input and labels are functioning correctly. What could I be overlooking?

Web Development : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> The Coding Academy Survey</title> <link rel="stylesheet" href="styles.css" ...

htmlcss

Eliminate custom CSS generated by themes on WordPress category pages

I am a newcomer to the world of Wordpress and I'm currently in the process of making adjustments to an existing theme. The theme itself is generating custom CSS code and adding it to the wp_head section. add_action('wp_head', 'custom_c ...

phphtmlcsswordpress

Limit the container's height to be no more than the height of the

Seeking input on good and bad practices in CSS/HTML/jQuery, I recently asked a question about determining when it is appropriate to use jQuery to set container dimensions. The responses I received were helpful (view them here). Realizing that jQuery may n ...

htmlcss

Ways to format table using flex-wrap sans the use of flexbox

My HTML and CSS structure is as follows: .item { background: white; padding: 5px; display: inline-block; text-align: center; } .item > div { background: yellow; width: 60px; height: 60px; border-radius: 50%; display: table-cell; ...

htmlcss

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

I am facing a small issue that I need help with. My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div. Essentially, I want bottom: 0% to align with the bottom of ...

css

Adjust iFrame to allow scrolling dynamically

I am currently facing a challenge with creating a non-scrollable iframe element using JavaScript. The function I need to call is within an iframe, and while it works on Firefox and Chrome, I also need it to work on Internet Explorer. My solution involves ...

jqueryhtmlcssxhtml

The initial item on the list, displayed on the right side in Google Chrome

Currently experiencing an issue with Google Chrome where the first list item's bullet is floating right while all other list items' bullets are aligned correctly at left. Here is the code snippet causing the problem: <div class="window_sub_ ...

htmlcssgoogle-chromecross-browser

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

Removing an Element in a List Using Jquery

In my JQuery, there is a list named additionalInfo which gets populated using the function below: $('#append').on('click', function () { //validate the area first before proceeding to add information var text = $('#new-email&a ...

javascriptjqueryhtmlcss

Issue with Bootstrap 4 nav bar where the first nav item is not highlighted and a problem with scrollspy

I have encountered an issue that I need help resolving. My Bootstrap 4 navbar has scrollspy enabled to update as you navigate through the page's sections, and a jQuery function provides smooth scrolling when clicking on navigation links. However, I am ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with combining overflow-x, Firefox, and JavaScript

In Firefox, an issue arises that does not occur in other browsers. To see the problem in action, please visit this example page: -removed- Try selecting a page other than the home page. The window will scroll to your selection. You can then scroll down u ...

javascriptjquerycssfirefoxscrollto

Problem with jQuery image gallery

Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...

jqueryhtmlcss

"jQuery Hide-and-Seek: A Fun Way to Manip

I am facing a challenge with a set of divs that I need to dynamically show and hide based on user interactions with questions. Essentially, the user will be presented with a question. Based on their answer, specific content with a title and description wi ...

javascriptjqueryhtmlcss

What are the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone ple ...

htmlcssbootstrap-4thymeleaf

The footer and login form are tangled up in a web of confusion

Here is my HTML code for a login form: <div class="middle-box text-center loginscreen"> <div> <form class="" role="form" action="index.html"> <div class="form-group&q ...

htmlcsstwitter-bootstrap

The animation isn't loading

I discovered a handy script that displays a waiting message when my form is submitted. I implemented jquery-ui to showcase this message in a dialog box, and it was successful. However, upon customizing the text and adding an animated gif background using C ...

javascriptjquerycss

The code is malfunctioning on this site (yet functions perfectly on a different website)

So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Transform the snake code by incorporating a visual image as the face of the serpent

Can someone help me change the snake's face to an image instead of a color fill in this code? And how can I add arrows for mobile compatibility? (function() { // Insert JS code here })(); // Insert CSS code here This code snippet includes functi ...

javascripthtmlcss