Is there a way to change the color of the inner (white) part of this icon?
<i class="fa fa-exclamation-triangle"></i>Just adding
<i class="fa fa-exclamation-triangle" style="color:red"></i>This question pertains to Font Awesome version 4.7.0.
The icon's exclamation mark appears transparent, so a clever solution is to add a background behind it to achieve the desired color effect. It's important to ensure that the background covers only a portion of the icon, which can be accomplished using a gradient.
.fa-exclamation-triangle {
background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-exclamation-triangle fa-4x"></i>
<i class="fas fa-exclamation-triangle fa-2x"></i>Similar technique for the V4 version:
.fa-exclamation-triangle {
background:linear-gradient(red,red) center /20% 70% no-repeat;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-exclamation-triangle fa-5x"></i>
<i class="fa fa-exclamation-triangle fa-4x"></i>
<i class="fa fa-exclamation-triangle fa-2x"></i>Here's the SVG version:
.fa-exclamation-triangle {
background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-exclamation-triangle fa-4x"></i>
<i class="fas fa-exclamation-triangle fa-2x"></i>UPDATE
To create a more versatile solution, we can also utilize multiple backgrounds and radial gradients to color various shapes effectively. The key is to cover the transparent part with the background while maintaining balance.
Below are examples of icons:
.fa-exclamation-triangle {
background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}
.fa-ambulance {
background:
linear-gradient(blue,blue) 25% 30%/32% 45% no-repeat,
radial-gradient(green 60%,transparent 60%) 15% 100%/30% 30% no-repeat,
radial-gradient(green 60%,transparent 60%) 85% 100%/30% 30% no-repeat;
}
.fa-check-circle {
background:radial-gradient(yellow 60%,transparent 60%);
}
.fa-angry {
background:
radial-gradient(red 60%,transparent 60%) 25% 40%/30% 30% no-repeat,
radial-gradient(red 60%,transparent 60%) 75% 40%/30% 30% no-repeat;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-ambulance fa-7x"></i>
<i class="fas fa-check-circle fa-7x"></i>
<i class="fas fa-angry fa-7x"></i>Temani Afif's response on StackOverflow is quite impressive! I have an alternative method to achieve the same result;
.fa-exclamation-triangle{
position: relative;
z-index:0;
}
.fa-exclamation-triangle:after{
content: ' ';
width: 20%;
height: 70%;
position: absolute;
top: 15%;
left: 40%;
background: red;
z-index: -1;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-exclamation-triangle fa-5x"></i>
<i class="fa fa-exclamation-triangle fa-4x"></i>
<i class="fa fa-exclamation-triangle fa-2x"></i>Hey there! I've come across a PHP code snippet that sends back an HTML file as a response. This PHP code makes use of the include method to send the file. When I'm on the client side, I'm employing AJAX. Upon typing console.log(data) (with ...
What is the term for the specific layout style used on Asana's homepage? This layout consists of a single, long page divided into sections that are approximately the size of the viewport. While sometimes it includes parallax scrolling, in this case i ...
I am looking to customize this source code by using a CSS override to ensure that the "lightning-relative-date-time" element is not utilized. I want to keep it displaying the timestamp information by default. Can you guide me on how to achieve this throu ...
<table> <tr> <td><img src="http://www.foo.com/a.img"></img></td> <td><img src="http://www.foo.com/a.img"></img></td> <td><img src="http://www.foo.com/a.img"></img&g ...
Despite the fact that this question has been raised multiple times, I find myself in a slightly tricky situation. Here is the structure of my table: <table> <th>...</th> <app-custom-rows *ngFor="let t..." [customAttribute]="someval ...
I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...
I've created a ShowcaseMovie component that fetches data using componentDidMount(), stores it in state, and renders Card components to display the data. The component also features four button elements for toggling between different filters: upcoming, ...
Currently, I am working on developing a Windows Phone application specifically focusing on creating a "Windows Phone HTML 5 app". However, I have encountered an issue while using ajax with Jquery (version 1.9.1). The snippet of my code is as follows: ...
I am experimenting with animating three separate divs one by one, each moving down 50px as a test. Here is the SCSS code I am using: .action { margin: 20px 0; text-align: center; transform: translate(0,0); transition: ...
For all you web development experts out there, I have a question regarding CSS styles. I often see precise pixel or percentage measurements used for properties like "padding" and "height." Experienced developers seem to effortlessly position their content ...
I'm struggling to find the right way to phrase my question, but I have a website example to help illustrate what I'm asking about. Check out this example website Upon resizing the browser window, only the margins of the website adjust and not t ...
Looking for a more elegant solution to sanitize HTML ID attributes? /** * * HTML 4 Specification * ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number * of letters, digits ([0-9]), hyphens ("-"), underscores (" ...
Vue offers the v-if and v-for directives that allow you to manipulate elements in the DOM based on certain conditions. In order to animate elements controlled by v-if and v-for, you need to utilize the built-in Transition and TransitionGroup components. Bu ...
While using Angular, I encountered an issue when sending an email with an attachment. The response I received contained the data code of the file instead of its actual format. See example: https://i.stack.imgur.com/vk7X8.png I am unsure what is causing t ...
Currently, I am in the process of developing fullCalendar drag-and-drop events with a resource column. Initially, I hardcoded the draggable events area and now I am working on retrieving it from the database. Previously, the database had two tables - Resou ...
I've been attempting to incorporate TinyMCE with GWT's RichTextBox, but so far I haven't had any luck. The issue seems to be that GWT turns the Rich text area into a #document, rather than a standard textarea in HTML. Does anyone know how to ...
As I navigate the online world, my goal is to create a dynamic animation of a rotating cube with an image on each face. Despite my efforts, I am struggling to display all faces simultaneously, especially the front and back faces. I have explored various so ...
Struggling to animate my images with greensock so they start from bottom: 0, have opacity 1, and stagger in. My code seems valid but I must be missing something after looking at it for so long. I suspect the find() function is not returning what I expect ...
I have created a website using HTML5 and I am trying to create a direct link to a product checkout page without all the additional formatting and features that come with BuyButton. Shopify has provided me with this code: <div id='product-component ...
I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...