I am currently utilizing BigCommerce and my code looks like this:
.icon-cart {
color: #4ca3c0 !important;
}
.icon-cart a{
color: #4ca3c0 !important;
}
Despite the above, it seems that the icon's color remains unchanged. Any suggestions or insights would be greatly appreciated.
We seem to be having some trouble with the fontAwesome installation.
The reason why the color of the shopping cart isn't changing when using the color CSS attribute is because the shopping cart is actually being rendered by a sprite:
.icon {
display: inline-block;
width: 16px;
height: 14px;
background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px;
}
This means that the background property is loading an image rather than an icon.
You can refer to for more information.
If you make sure to remove the background, install the other directories, and keep your HTML as is, it should resolve the issue.
UPDATE: Upon further investigation, it appears that fontAwesome has been installed correctly.
To change the appearance of the <i> element, follow these steps:
<i class="fa fa-shopping-cart" title="View Cart"> </i>
You have the option to customize the size and position for better display, but make sure to include the fa and fa-shopping-cart classes to show the shopping cart icon properly.
The icon on your website is not created using CSS, but rather as a PNG image loaded as the background for the icon.
If you want to change its color, you'll need to use CSS Filters to adjust it.
For example, you can apply the invert filter to the <i> element:
-webkit-filter: invert(100%);
This will change the icon from gray to white.
body {
background: black;
}
.icon {
display: inline-block;
width: 16px;
height: 14px;
background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px;
-webkit-filter: invert(100%);
}
.icon:hover {
-webkit-filter: invert(0%);
}<i class="icon icon-cart" title="View Cart" style="
color: red;
"> </i>To start, let's get rid of !important
.icon-cart {
color: #4ca3c0;
}
.icon-cart a{
color: #4ca3c0;
}
Now, take a look at the markup:
<a href="" title="View Cart">
<i class="icon icon-cart" title="View Cart"> </i>
<span></span>
</a>
The class .icon-cart belongs to the i tag and does not have any children.
Therefore, the following is incorrect:
.icon-cart a{
color: #4ca3c0;
}
Currently, I've been developing a chat plugin for HTML using VueJs. My dilemma lies in creating a versatile plugin that can seamlessly integrate into any website. My ultimate goal is to design a plugin that can be easily deployed on various websites ...
While attempting to scrape data from instacart.com, I encountered the requirement of entering a zip code to determine the displayed information. My intention is to utilize Python requests to submit a random zip code. However, I am unsure of which URL to po ...
I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...
Recently, I designed a custom User Control in asp.net. public class InputMask : CompositeControl, IPostBackDataHandler, IPostBackEventHandler Imagine the custom control is enclosed within a div element: <div runat="server" id="inputArea"> < ...
Hello everyone, I'm new to this forum and seeking some assistance. I have a requirement where multiple div contents need to fade in and out dynamically. I found this jsfiddle example that works for 2 divs, but I want it to work for more, say 5 differ ...
I'm working on a webpage that allows users to create elements dynamically and I want to save those elements to the server. When someone else visits the page, I want them to see those saved elements as well. I'm not too familiar with web programm ...
Hello, I am currently developing a project in an ASP.NET environment and am in need of a framework that can generate interactive charts on the server side. It would be ideal if the framework is open source, and produces charts in HTML5 as I also plan to pu ...
Seeking assistance with creating buttons to control a remote light's ON and OFF states while reflecting their status as well. The specific http API calls for the light are necessary to toggle its state. Turn On = http://192.168.102.22:3480/data_requ ...
I am looking to extend the background color or image to mimic the appearance of the example at the bottom in this jsfiddle Same code but showcased here: Example1: <div class="fixed_width"> <div class="header">Header</div> <div ...
I'm attempting to style a reStructuredText segment in the following layout: type1 : this type4 : this type7 : this type2 : this type5 : this type8 : this type3 : this type6 : this type9 : this I want to fill the page with tex ...
After successfully logging into my PhoneGap app, everything functions properly. I can send requests within the current session and am authenticated. However, if I completely close the app and reopen it, my session is lost. The cookie containing connect.sid ...
Is there a way to ensure that div B has a width of 100% when nested inside Div A, which already has a fixed width? .divA{width:600px; margin:0 auto;} .divB{width:100%; height:20px; background-color:black} .filler{height:800px; background-color:grey} ...
I'm dealing with dynamically created divs that have variable content, all following the same CSS rules. My goal is to organize them into 2 columns without any space in between. I attempted to use float: left/right, but there still remains space at the ...
I am in the process of developing a weather application using The Weather API. So far, I have successfully retrieved the necessary data from the JSON and presented it in HTML format. My next goal is to extract hourly weather information from the JSON and ...
I'm attempting to create something similar to this: Here's what I have so far: Html: <div class="panel-heading" data-toggle="collapse" href="#data2"> <div class="heading"> APPLICATION </div> <span clas ...
As I work on creating a posts section for my readers, I have encountered an issue. When a user adds a new post, it gets saved into the database in this format: Some say the world will end in fire,<br /> Some say in ice.<br /> From what I’ve ...
Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...
I'm currently using Material UI chip to show name and email next to each other. However, when the name is long, the email goes beyond the chip boundary. Here's my function that generates the chips: getGuestList() { let {guests} = this.sta ...
After creating an online drumkit and guitar player, I am now looking to enhance my website by adding a feature that allows users to record their sessions and download them. Since I am new to web development and familiar only with HTML, CSS, JavaScript, and ...
I have multiple child divs inside a parent div. I want the child divs to stack vertically (block) within the height of the parent div, but if they exceed the height, I want them to align horizontally (inline). I have provided an image and included my code ...