Unique Font Awesome Stylesheets

I'm facing a challenge with using Font Awesome to design my form. The FA icon comes pre-filled with color, but when I try to apply a specific color, it gets applied to the entire icon. Is there a way to work around this issue? Alternatively, should I consider using a different unicode character altogether?

It's worth mentioning that I am required to achieve this solely through CSS without altering the parent component. Therefore, I need to find a solution by applying only a CSS class. If there are any other unicode characters that resemble the desired icon in the style guide more closely, please advise me on that as well.

- Many thanks for your assistance!

Here are the images for reference:

https://i.sstatic.net/tKPLV.png

https://i.sstatic.net/TEFeV.png

The first image shows what I currently have, while the second one displays how it is intended to look like.

.exclamation-red .validation-tooltip-text:before {
    border: none;
    content: "\f06a";
    font-family: fontAwesome;
    left: 10px;
    position: absolute;
    font-size: 20px;
    top: 12px;
    color: white;
}

Your guidance would be greatly appreciated. Thank you.

htmlcsstwitter-bootstrapfont-awesome

Answer №1

You can achieve a stylish round shape by using fa-exclamation and adding a white border to it.

.validation-tooltip-text:before {
  content: "\f12a"; // http://fortawesome.github.io/Font-Awesome/icon/exclamation/
  font-family: fontAwesome;
  left: 10px;
  position: absolute;
  font-size: 20px;
  line-height:22px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-align: center;
  vertical-align:middle;
  top: 12px;
  color: white;
}

http://codepen.io/partypete25/pen/dMwwvz?editors=1100

Answer №2

If you're looking to switch up the icon class, I recommend using fa-exclamation. Another option is changing the unicode to "\f12a" and incorporating a white border with border-radius. Ensure the width matches the icon height for proper centering.

Consider this sample code:

.exclamation-red {
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    width: /* adjust to match icon height */
    text-align: center;
}

.exclamation-red:before {
    content: "\f12a";
    color: #FFFFFF;
}

Adjust the values as needed to achieve your desired outcome.

In addition, if CSS isn't your only constraint, you could explore layering the exclamation and circle-thin icons together.

Answer №3

It seems like the FontAwesome icon may not be exactly what you're looking for. It lacks a border, so even if you make the background color transparent, you won't achieve the white border effect. I recommend creating your own 'icon'. You can try something similar to this:

HTML:

<div class="exclamation-circle">
    &#x21;
</div>

CSS:

.exclamation-circle {
    color: white;
    width: 30px;
    height: 30px;
    font-size: 1em;
    font-weight: bold;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 50%;
    text-align: center;
}

You have the flexibility to adjust the font-size, div width and height (ensuring they are equal for a perfect circle), and border thickness according to your preferences.

Feel free to check out a working example here: https://jsfiddle.net/k61gaf9z/

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

How can I create an HTML form input slider/range that accepts non-numeric values?

<input type="range" min="2" max="52" value="4" step="1"/> Is it possible to have an input range with non-numeric intervals, such as "Yes," "maybe," and "no"? Appreciate any guidance on this. Thank you. ...

jqueryhtmlinputrange

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

incorporating additional lines into the datatable with the help of jquery

I am attempting to directly add rows to the datatable by assigning values in the .js file through the Metronic theme. However, despite displaying item values during debugging, the values are not being added to the datatable row array and thus not reflect ...

jqueryangularjsdatabasehtmldatatable

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

One of my recent projects involved creating dynamic rows in a form using code. I managed to save the data in an array and display it using a foreach loop, but I'm facing challenges when trying to insert this data into a database. Here's a glimps ...

javascriptphpcssmysql

Arranging cells within a table with numerous rowspan configurations

I need some help creating a table that will be divided using rowspans for a PDF rendering with BFOreports. I have included an example layout below (numbers are just for reference): https://i.stack.imgur.com/Wbe96.png However, the output I am currently ge ...

htmlhtml-tablebfo

Set the position of a div element to be fixed

I am currently working on a straightforward application that requires implementing a parallax effect. Here are the methods I have experimented with so far: - Inserting an image within a div with the class parallax. - Subsequently, adding an overlay div ...

javascripthtmlcsssassparallax

Tips for preventing event propagation while clicking on a swiper.js image next/prev button within a bootstrap card

I have integrated ngx-swiper-wrapper within a bootstrap card as shown below, with a routerlink at the top. When I click anywhere on the card, it successfully routes to the designated page. However, I am facing an issue where I want to prevent routing if a ...

htmlangulartypescriptswiper.jsngx-swiper-wrapper

The font displayed in Photoshop Mock Up may not be identical to the font used in HTML

(HTML Newbie) I created a design using Photoshop for my website, but the text appears differently when viewed in Firefox. I used Arial font, 18pt size, and regular weight in the mock-up, and implemented it into HTML code, yet it displays differently. Is ...

htmltextfonts

Set up dynamic restrictions for the length of an HTML paragraph with PHP

I am attempting to dynamically set the limit of content retrieved from a database in PHP. Specifically, I need to trim the input from the database before assigning it to an HTML paragraph. I attempted to use the substr function but was unsuccessful. Can y ...

phphtml

Issues with jquery gui elements in Chrome extension being unresponsive

Using chrome extensions and jquery to create a customized GUI, but running into issues with displaying the jquery elements on the HTML page. Can anyone spot what might be the problem? manifest.json: { "name": "my extension", "description": "my first ...

javascriptjqueryhtmlgoogle-chrome-app

Attempting to enlarge logo or image when cursor hovers over it

Seeking to enhance logo/image size when cursor hovers over it, but facing an issue where it enlarges even on areas outside of the image itself - View Example. I followed a tutorial to achieve this effect, and specified the width as 1024x1024 for the logo/i ...

htmlcssweb

Switch back and forth between words using a simulated typewriter effect in JavaScript

My current project involves writing code that will display text in a typewriter style. The code should be able to print a string, erase the last word, and type out words from an array in sequence. Each word in the array should be displayed one at a time be ...

javascripthtmlarrays

Is there a way to ensure a Bootstrap modal is loaded only after successful form validation?

I am currently working on implementing a modal window that displays the terms & conditions, and only submits data to the database once the user has accepted them. I would like to validate user input before opening the modal. Here is my code snippet: indiv ...

python-3.xdjangotwitter-bootstrapdjango-views

Issue with Bootstrap 5 navbar dropdown: It opens easily but struggles to close

I am currently using Bootstrap 5 to design a website and have incorporated a dropdown feature into the navigation bar. On desktop, when hovering over the dropdown, it should open, while on mobile, clicking the dropdown should toggle its visibility (open/cl ...

htmlcssfrontendnavbarbootstrap-5

Multiple instances of Ajax drop-down effects are now available

On my website's staff page, I have implemented a dropdown menu using AJAX to display information about each member of the staff. The issue arises when attempting to open multiple dropdown menus on the same page - the second dropdown that is opened ten ...

javascriptphpjqueryhtmlajax

Get rid of empty spaces in gridstack js

My latest project involves using gridstack js In the image displayed, I have highlighted the excess white space (in blue) that needs to be removed. Take a look at this visual: https://i.sstatic.net/Qgt62.jpg Any suggestions on how to eliminate this ...

javascriptjqueryhtmlcssgridstack

Having all elements at the same height

I am looking to enhance my JavaScript code to only impact 4 items at a time. The goal is to target the first 4 instances of .prodbox, adjust their height accordingly, then move on to the next set of 4 and repeat the process. This sequential adjustment will ...

javascriptjqueryhtmlcss

What is the best way to resize a SWF file within an HTML page?

Within the Stage class, both stageHeight and stageWidth properties can be modified. Is there a method to embed the swf file in a way that any changes made to these properties are automatically reflected on the HTML page? Is it possible to achieve this wit ...

htmlactionscript-3flash

Adapt button functionality according to selected dropdown value in Angular

I have implemented a License Key generation process in my application where user input is used to create a unique key that is then passed to the Java backend. The code snippet for generating the key is as follows: @PostMapping("/generate") public Li ...

javahtmlangulardrop-down-menu

HTML form struggles to transfer information to MySQL database

Despite successfully connecting my HTML form to a MySQL database, I encountered an error whenever I attempted to submit data, resulting in no data being passed to the database. Here is a screenshot of the error message: Let's create the necessary da ...

phphtmlmysql