Is it possible to use font awesome's exclamation triangle icon with the exclamation mark in red and the triangle's background in white? I've tried changing the color to red but it didn't work as expected. Can anyone provide guidance on how to achieve this?
<i class="fa fa-exclamation-triangle fa-3x" style="color:#C00000"></i>
Unfortunately, if you can't find a triangle icon in the FontAwesome collection, you can always use a square instead. To do this, you can stack icons like so:
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x" style="color: white;"></i>
<i class="fa fa-exclamation fa-stack-1x fa-inverse" style="color:red;"></i>
</span>
To see it in action, click here: http://jsfiddle.net/ao486t04/
An effective solution involves utilizing the original exclamation triangle and stacking it for added impact.
body {
background:red;
font-size:30px;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-sm">
<i class="fa fa-exclamation fa-stack-2x fa-inverse" style="font-size:1.5em; padding-top:.2em"></i>
<i class="fa fa-exclamation-triangle fa-stack-2x" style="color:blue;"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-exclamation fa-stack-2x fa-inverse" style="font-size:1.5em; padding-top:.2em"></i>
<i class="fa fa-exclamation-triangle fa-stack-2x" style="color:blue;"></i>
</span>To craft your unique vector icon, utilize Illustrator or Corel Draw for creation. Alternatively, import your icon's PNG file into Photoshop and apply a red color using the bucket tool on the triangle section. This clever technique can certainly enhance your design.
I am having an issue with Font Awesome and Bootstrap 4 Accordion. I want to show a plus icon within a circle that toggles to a minus icon within a circle, but only the circle is displaying. Here's the code snippet for my accordion section featuring Fo ...
https://i.sstatic.net/E3ZFb.png My goal is to create a pixel-perfect star using CSS. I have attempted to achieve this so far, but the star currently has 5 points and I would like it to only have 4 points. Additionally, I am looking for a way to make the c ...
Project link: The media queries provided cannot be altered and must remain as they are. However, an issue has arisen where devices are selecting the styles from smaller resolutions than intended. For example, instead of picking styles from (min-width: 992 ...
For my website design, I've decided to adopt a modular structure using sass. To ensure consistency throughout the module, instead of defining stylesheets at the component level, I plan to define them at the module level and import them into each compo ...
I am struggling to achieve a seamless header design that flows from the logo. I have experimented with aligning images within containers and using long background images, but neither method has yielded satisfactory results. Is there a reliable way to cre ...
Struggling to align text next to these icons? Don't worry, we've all been there. Especially with bootstrap - it can be tricky! Can someone please guide me on how to do this? <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstr ...
With that being said, the recurring issue that always arises is as follows: -modal and overlay appears, -user scrolls down -user can click elements under the overlay How can this be fixed? The primary concern right now is with the overlay. The CSS cod ...
I've integrated the ngbDatepicker into a form as shown below <ngb-panel> <ng-template ngbPanelTitle> <div class="row"> <ui-switch (change)="onChange($event,2)" [checked]="profession ...
I'm having trouble making the inner divs within table cell divs expand and fit their parent div without overlapping the next cell below it. Check out the sandbox for reference I've outlined the areas in grey where I want the cells to be filled. ...
My navbar class is set to change based on scroll position Script <script> $(window).scroll(function () { if ($("#main-navbar").offset().top > 100) { $("#main-navbar").addClass("navbar-shrink"); } else { $(" ...
Is there a way to automatically generate unique background colors for list elements? Check out this html snippet that displays list items with different background-colors. <ul> <li> <a href=#">I am the first element</a> ...
I recently completed building my website at emdashr.com and have been adjusting the mobile views. However, I'm facing an issue where the navbar-brand disappears when viewing the site on mobile Chrome or desktop Chrome with a small viewport. Interestin ...
When passing the className props to the child component, sometimes the className for the active link is not correctly reflected in the DOM element during production: The child component (Link) receives the className prop for the active link from the paren ...
In the following code snippet, there is a challenge in ensuring that the TextBox field properly fits within the Width and Height of the div#chat-message. This seems to work well in Chrome but encounters issues in IE8 or Mozilla. Additionally, in Mozilla, t ...
Looking to add interactivity to rotate text within a div upon button click using jQuery and CSS. If the user selects Rotate Left, the text will rotate to the left. Alternatively, if the user chooses Rotate Right, the text will rotate to the right. Here&a ...
I am trying to create a zoom effect on mouseover, but I am facing an issue where the height is set to 'auto' causing the zoomed-in image to overflow from the div and increase in height. I need to maintain the height as 'auto' for respon ...
As I type into the auto-sizing textarea, the text runs to the bottom of the page and causes it to dance uncontrollably with each key press. This forces me to constantly scroll down to see what's happening. How can I prevent this page dancing and keep ...
Having some trouble achieving a smooth transition for the height and width of images on my webpage. I believe if you take a look at my page, not much explanation is needed: Click here to see the image transition The goal is to enlarge the image to double ...
I am working on a layout that consists of an editor and multiple buttons positioned above it on the right side. My goal is to add a panel just below "Button2" that will overlay the editor. This panel should expand and collapse when "Button2" is clicked, wh ...
In my current situation, I am dealing with a large number of divs (over 300) that are being used as part of an interactive background. The issue arises when viewing the page on mobile versus desktop – there are too many divs on desktop, causing excessive ...