Using Font Awesome with WordPress

This post was originally published in February 2015, and was updated in June 2017 to adjust the variation, along with other minor edits and additions.Web Icons Users

arriving at a site are focused as much on the visual style of a website as they are on the content they are intending to find there.Traditionally, designers

and developers have utilized private images/sprite-sheets for their icons; these graphics were a series of pixel-perfect images that would be utilized in particular parts of the site( such as in the search bar, on navigational aspects, as loading icons, etc ). Showing icons with images/sprites worked well for

a very long time( and numerous sites will still use them ). With the focus on responsive design more important than ever, the challenge has actually been providing spectacular iconography that looks great regardless of your device. What Are Font Icons?Font icons are a method in which we can show totally responsive, personalized icons on our website without using additional images or sprite-sheets. Font icons are precisely what they sound like, a typeface made up entirely of icons.< img src=”” alt=

Font Awesome Icon Examples

” Typeface Awesome Icon Examples” width=” 231″ height=” 52″ > Where a regular font defines characters such as’ a’,’ b’,’ c’, an icon font style defines characters that are signs, such as the search symbol, the menu toggle symbol, and an entire heap of others– all in one font style.

Why Would I Utilize Font style Icons?Traditional images

have actually worked well historically, however icon fonts provide us a higher amount of flexibility and let us more quickly handle our icons, and do so with responsiveness and ease. Font Icons are Fully Responsive These icons are vectors and can be scaled to any

  • size with no loss of quality. Conventional images are raster images and created at a set size/dimension( usually based upon a grid such as 48 × 48 )These images can look awful when resized or when seen on a high resolution gadget. Font Icons can be styled, positioned and manipulated Font icons can be managed as if they were normal font styles; you can set their color, background color, text positioning, line height and other attributes to style them utilizing CSS. Standard images do not give you fine control. If you want an image to be a little different in color or size, you will have to upload a various image
  • . Typeface Icons are Cross-Browser and Perfectly Available Typeface Icons have deep compatibility all the method back to ancient internet browsers (I’m taking a look at you, IE6) There are lots of terrific

icon typefaces that designers have invested many hours on; these typefaces

  • are usually updated frequently and refined to supply the very best experience. Here is a random example of an icon font style; no images needed.< img src=” “alt=” Typeface Awesome Example” width=” 275″ height=” 80 “> With all the terrific complimentary icon fonts out there, extremely littleFont Awesome Example

    reason exists to use standard images for icons any longer. However, there are still some arguable disadvantages to icon fonts.Browser and OS differences– Due to the fact that these are font styles, it’s up to the web browser how it

    • renders the icons( there aresubtle variations in between each OS, in between internet browsers, as well as between different variations of the very same web browser). Standard images, nevertheless, look the same no matter exactly what they are viewed on.Not every icon exists– Designers have covered many of the icons you will need in your projects; however, not all icons possible have been developed, and so you might find yourself having to rely on images in some situations.Getting Font style Awesome into Your WordPress Task Typeface Awesome is included in countless tasks throughout the Web, consisting of WordPress themes (such as SitePoint

    ‘s own< a href =”” > Base Theme) and plugins. Integrating Typeface Incredible with WordPress, be it a theme or plugin, is incredibly simple and requires simply a few actions to obtain up and running.There are dozens of icon font styles to use, however for this tutorial I will be utilizing Font Awesome as they have hundreds of really incredible icons. We will be utilizing variation 4.7 of Font Awesome.Use a Regional or

    External Copy of Font style Awesome There are 2 main options for getting Font style Awesome in your task; you can either load the files on your web server or simply connect to the externally hosted stylesheet on a CDN. Download Typeface Awesome

and Include the Fonts/CSS By hand Click the download link on the Typeface Awesome web page and get the zip file. Inside the zip file, you will see the font styles and the required CSS file( there are likewise

LESS/Sass files but we are not going to be using them). Your zip file should have the list below resources that you will have to move over to your job( move them into their own appropriate directories through FTP). Develop a directory site in your theme or plugin called’ fonts’ and another called’ css’ and move the files into these directories.Go into your theme’s functions.php and develop a new function that we will utilize to load our stylesheet Produce a function and attach it to the wp_enqueue_scripts action. When you have this function call the wp_enqueue_style function and load your stylesheet.// enqueues our locally supplied font style awesome stylesheet. function enqueue_our_required_stylesheets( ) css add_action( ‘wp_enqueue_scripts’,’ enqueue_our_required_stylesheets’); Link to a Hosted CDN Hosting with a 3rd party CDN makes the procedure that much easier; all you have to do is create a function inside your functions.php file and connect that function to the wp_enqueue_scripts action. Inside this function you will simply enqueue the stylesheet( except this time you will reference the externally hosted link):// enqueues our external

font remarkable stylesheet. function enqueue_our_required_stylesheets( )css add_action (‘ wp_enqueue_scripts ‘,’ enqueue_our_required_stylesheets’); Ways to Utilize Font Awesome (and Icon Fonts in General )Font Awesome can be utilized in 2 different ways. Which way you implement it is totally as much as you, and the requirements of your project.A Pseudo Component( a CSS Method) Utilizing a pseudo technique for including your icon includes using the: before or: after pseudo CSS selectors to design your desired HTML aspect. Exactly what you do is figure out the aspect you wish to
apply your icon to and develop a CSS style either before or after the component and by hand set the icon that will be used (in addition to its style and design). Each font in an icon font set has a distinct code that represents the icon; this code is Unicode and informs the internet browser that you desire

to show the character that corresponds

to this code. You would create your pseudo component and set its font to use your fonticon household, and you would then set its content value. The main residential or commercial properties you require

to set are content and font-family to their respective values( so that the pseudo component will appear). Button Example

Written by 

Related posts