I am looking to modify my custom icon in my application. It currently has a black fill, but I need to change the fill color to white while keeping the border of the smiley face black. The original smiley icon is provided below:
https://i.sstatic.net/44gTw.png
Here is the code snippet:
<div>
<i class="icon icon-smiley-face-2"></i>
</div>
Would anyone be able to assist me with changing the fill color to white and maintaining a black border for the smiley face icon?
To test the functionality, try implementing a custom class on the i tag. If it does not function as expected, consider adding an !important directive like the example below (only if necessary):
.icon-smiley-face-2{
stroke: #000000 !important;
fill: #ffffff !important;
}
To achieve this effect, you can utilize basic CSS styling.
.icon-smiley-face-2{
color: #fff;
border:1px solid #000;
}
Make sure to test it out to see if it functions correctly. Since this is a custom icon, the interaction may be different than expected.
.icon-smiley-face-2{
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
color: white;
}
For more information, visit this Stack Overflow reference
I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...
Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...
Currently, I am using Ionic and HTML to implement a vertical line within an ion-item in an ion-list. The desired outcome is to have something similar to this (the colored line after 'all-day'): I attempted the following approach: <ion-list&g ...
I'm currently using an AngularJS filter to sort through a list of items. Here is the Jade markup I am using: li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") After the filter function runs and the elements are displayed in the DO ...
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#hidebtn").click(function() { ...
Here's a simple code that generates divs using a while loop. However, it doesn't seem to be working as expected. It's actually just basic HTML, nothing too complex. But for some reason, it's not displaying any of the five divs. <? ...
As a beginner in web development, I am eager to tackle a hobby project that will help me learn more about PHP and other web-related technologies. I have been considering creating a simple webmail client, but I'm not sure where to begin. I anticipate ...
I am trying to vertically center my content div within my header div without any extra space around it. I had it working before but the width of the content div would always be 100%. Here is the code I used: #header { position: absolute; width: 100% ...
I have a similar code snippet: <article class="leading-0"> <h2> <a href="link">link title</a> </h2> <ul class="actions"> <li class="print-icon"> <a ...><img...>& ...
I'm currently working with Bootstrap 3 and I am attempting to replicate jQueryMobile's select option feature. This would involve replacing the standard select textbar and arrows with a single button that can toggle the opening of the select. Ins ...
During a live editing session, I am looking to make only specific portions of the page selectable. Can someone provide guidance on how to disable selection for everything except within a particular div? ...
I have a unique feature on my website where text hyperlinks reveal small thumbnail images when hovered over. This concept was inspired by an example I found on this page. I initially implemented the code from a post on Stack Overflow titled Display Image O ...
Currently, I am utilizing the following code to achieve smooth scrolling for links: function filterPath(string) { return string .replace(/^\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace( ...
I have developed a unique welcome feature using HTML and CSS that I would like to showcase intermittently. --------------------------- My Desired Outcome --------------------------- Initially, this feature should be triggered once (when a user first acce ...
Currently, I am utilizing Python along with Selenium to automate a certain application. My goal is to extract the top value from a drop-down menu, however, the values in the menu are constantly changing. This makes it impossible for me to input a static XP ...
Over at this website, there's a top navbar that shrinks using jQuery when scrollTop exceeds 100px. The functionality works as intended, but there's an annoying stutter issue where the navbar starts jumping up and down erratically after slight scr ...
I am facing an issue with draggable events. Even though dragStart is functioning perfectly, drag and dragEnd events are not being triggered. Below is the HTML Element in question: <div [ngClass]="select ? 'show-re' : 'hide-re'" *ng ...
Recently, I've been on the hunt for a sprite sheet that is akin to bootstrap's, but dedicated solely to emotion icons like smiley faces and sad faces. Unfortunately, my search has been fruitless so far. Does anyone happen to know of such a sprite ...
I could really use some help with my CSS skills: Here is the HTML code I am working with: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cluster Test</title> <link rel="stylesheet" href= ...
Frontend mentor projects have been a tricky challenge for me lately, especially when it comes to serving images of different viewport sizes on desktop. I've tried using the picture element and specifying at what width the image should be served, but f ...