Add a font awesome icon to an external CSS file

Want to add a Font Awesome icon to an external CSS stylesheet?

If you're using Font Awesome 5 & the free icons, you can follow this code snippet:

#preview .buttons .ok {
    border: 1px solid #F5F5F5;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 20px;

}
.ok:before {
    content: "\e900";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

Give it a try now!

htmlcssbootstrap-4iconsfont-awesome

Answer №1

\e900 is not a valid icon in the Font Awesome library...

However, it works well with other icons (such as \f2b9)

To find the available icons and copy their Unicode for CSS styling, visit: https://fontawesome.com/icons?d=gallery

After selecting the desired icon, include the following link in the head tag of your HTML:

#preview .buttons .ok {
    border: 1px solid #F5F5F5;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 20px;
}
.ok:before {
    content: "\f2b9";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

<div id='preview'>
    <div class='buttons'>
          <div class='ok'></div>
    </div>
</div>

Answer №2

Looking for a stylish Font Awesome 5 free icon?

border: 1px solid #F5F5F5;
border-radius: 4px;
width: 28px;
height: 28px;
font-size: 20px;

content: "\e900"; 
display: inline-block; 
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);

Remember: To use Font Awesome 5 free icon, include this code in your external css file.

Go ahead and give it a try now.

Answer №3

To utilize Font Awesome icons in your project, simply add the following code snippet to your HTML file: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
. After including the link, you can easily implement the icons in your CSS. Make sure to refer to the official Font Awesome documentation for more guidance.

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

Issue with Bootstrap 5 Card Header not extending to full width

I have implemented tables within cards using a CDN. While the table looks fine in wide widths, it does not resize to fill the entire width when squeezed. Below is the HTML code: <div class="card table-responsive"> <div clas ...

htmlcssbootstrap-4bootstrap-5

What is the best way to incorporate width adjustments in an image source for a responsive website?

Currently learning CSS and experimenting with it on an HTML page. For reference, I'm using this link. Encountering an issue with a responsive header image that adjusts size based on device (small on mobile, large on desktop). Is it possible to achiev ...

jqueryhtmlcss

Modify the input value when using the get_search_form() function in Wordpress

After experimenting with the latest get_search_form() function in WordPress, I've encountered an issue where I can't figure out how to remove the text label from the search submit button. Does anyone have any suggestions or solutions for this pr ...

csswordpressinputsubmit

Run a chunk of HTML with dynamic PHP elements using JavaScript

Within a single .php file, there is a combination of HTML, PHP, and JavaScript. The JavaScript section is crucial for detecting the browser; if the browser is not Internet Explorer, JavaScript will trigger the HTML block containing PHP. Here is the JavaS ...

javascriptphphtml

Encountering issues with custom.css.scss not being properly overridden in Rails while using Bootstrap

My Configuration I made modifications to the .col-lg-4 class in Bootstrap for Rails and added them to my custom.css.scss file after the import statements to remove padding completely. The Issue at Hand I am trying to override the styling of .embed-respo ...

htmlcssruby-on-railstwitter-bootstrap

The operation of inserting values into the database encountered an issue due to an invalid cursor state, resulting in a java.sql.SQLException error with the

I am encountering an issue with invalid cursor state error while running this code snippet in my application. The technology stack I am using includes SQL Server 2005 along with JSP and HTML. <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Conn ...

htmljsptomcatsql-server-2005

Troublesome Zopim Widget Design Dilemma

After adding the Zopim widget code to the head section of my website, I found that it consistently loads with a black color theme, ignoring any color settings I try to apply. I've attempted to adjust the styles using CSS and Javascript, but so far not ...

javascriptcss

What is the best way to redirect to a specific page when logging out of a website?

To begin, let me outline the situation at hand. We have two distinct websites - website-A and website-B. Each of these websites is hosted on separate domains. A user has the ability to log in to website-B's homepage through the login page of webs ...

c#javascripthtmlasp.netlogout

Warning: CSS Validation Notice - Identical color and background-color used in two different contexts

I have been receiving numerous warnings similar to the ones mentioned below during a CSS validation check via > 513 Similar color usage for both text and background in multiple areas such as #blue_module and #red_module_top, .content ul li and # ...

css

Utilize jQuery to find elements based on a specific attribute containing a certain value

I need help targeting specific attributes in links to append classes based on the file extension. My page displays various types of files, from images to .ppt files. I am using ASP.NET MVC and jQuery for this project. <a class="screenshot" title="" fil ...

jqueryhtmlcsssearchattr

my divs are not being affected by the max-width property and are retaining their

I've been learning CSS and HTML through an interesting tutorial on Udacity. Here's the code I've been working on: .image{ max-width: 50%; } .app{ display: flex; } .description{ color: red; max-width: 705px; } <h1 class="title" ...

htmlcssflexbox

Who needs a proper naming convention when things are working just fine? What's the point of conventions if they don't improve functionality?

I am a newcomer to the world of JavaScript programming and stumbled upon this example while practicing. <html> <head> <script type="text/javascript"> function changeTabIndex() { document.getElementById('1').tabIndex="3" d ...

javascripthtml

Experience unique website functionalities across Windows/Android and Apple ecosystems

Apologies for any language errors in advance. I'm facing an issue where my website appears differently on Safari or Chrome on iOS/MacOS compared to Windows 10 or Android devices. If you observe the List of Receiving Countries in the images provided: ...

cssreactjsweb

Responsive menu is failing to respond to the click event

I'm facing an issue with my responsive menu on mobile phones. It should display two buttons - one for the navigation bar and the other to toggle the side bar by removing the classes hidden-xs and hidden-sm. However, I am having trouble getting the btn ...

javascriptjqueryhtmlcsstwitter-bootstrap

Step by step guide on creating a CSS triangle shape in front of a span element

Can you help me troubleshoot why my css triangle isn't displaying before my span? I've tried everything but it just won't show up. .triangle:before { width: 0; height: 0; border-top: 3px solid transparent; border-right: 6px solid ...

htmlcss

The max-width CSS property is failing to function properly on a specific DIV element

I'm having trouble restricting the size of the user-selected image with CSS. Can someone point me in the right direction? Currently, when a user selects an image, it is displayed at full size which sometimes extends beyond the visible area of the web ...

c#cssasp.net-mvc

Dragging objects on a map is done using jQuery and it causes them to bounce

Currently, I am working on implementing the JQuery Draggable feature. My idea is to create a map where I can attach image Divs to it dynamically using Jquery. So far, I have been successful in adding the Divs and making them draggable around the map effici ...

javascriptjqueryhtmldraggable

Extract the HTML content from a file stored on the computer

Currently, I am utilizing Google App Engine alongside Python. My goal is to retrieve the tree structure of an HTML file located within the same project as my Python script. Despite attempting numerous approaches, such as using absolute URLs (for example ht ...

pythonhtmlgoogle-app-enginelxml

How can I fix the alignment issue with my centered div?

My attempt to vertically align a centered inner DIV is not working as expected... What could be causing this issue? CSS Code: #page_bar { width: 100%; height: 30px; background-color: white } .page_bar { width: 800px; height: 30px; ...

htmlcssvertical-alignmentalignment

Injecting PHP variables into CSS code right from a PHP file

$a = "ABCD"; ?> <link rel='stylesheet' type='text/css' href='others.php' /> <style> .page-title { text-indent: -9999px; line-height: 0; } .page-title:afte ...

phpcss