Upload Fa Fa Icons File to Wordpress

There is no dubiousness that humans are very visual beings. And as such, we focus non only on the content, simply on the visual design of a website too.

Traditionally, web designers and developers around the world used images and image sprites to include icons on whatsoever website.

Those icons were then used across the website as a visual enhancement – in the navigation carte du jour, the search bar, loading icons in sliders, and similar.

However, as convenient as that method was, it as well had a few downsides. Those downsides became obvious when responsive design came into play which so crusade those images to appear cut off or fifty-fifty worse, completely blurry.

The answer to that trouble is font icons. They display fully responsive and customizable icons which add a piddling extra to your website design. Essentially, they are fonts fabricated of icons.

One such font is FontAwesome. And today, I'll show you how to hands add FontAwesome icons to your WordPress website.

What you will larn in this tutorial

• What icon fonts are and why y'all should use them
• How to add icon fonts into WordPress using plugins
• How to add icon fonts into WordPress manually

What are icon fonts and why you should employ them?

Icon fonts contain symbols or pictograms instead of letters and numbers. They can easily be resized using CSS and they won't increase your page load times, unlike previously used prototype sprites would.

Yous can utilize them to add icons to your navigation menus, feature boxes, post titles, and more.

There are several reasons why yous should utilize an icon font other than visual appearance:

• Font Icons are fully responsive – They're essentially vector files which means they can calibration to any size without losing quality.
• Font Icons can be styled, positioned and manipulated – Since they're fonts, you can manipulate them in the same way as you would a traditional font. Set their color, change their mode on hover, command their alignments, set their size, and more.
• Font Icons are highly cross-browser compatible and in that location are enough of them.
• Designers have spent numerous hours on these icons and they are updated frequently and aim to provide the best experience.

There are two ways to add FontAwesome to your WordPress website and nosotros'll go over both methods. The kickoff method involves using a plugin and the second one involves adding the font manually.

Option 1 – Adding icon fonts in WordPress using plugins

Using a plugin is past far, the easiest method of adding any font icon to your website. In this example we'll use Better Font Awesome to add the font to the website.

Step 1 – Install and activate

First matter yous need to do is install and actuate the Amend Font Crawly plugin.

Navigate to your dashboard and then click on Plugins > Add New. Search for FontAwesome and then click on Install.

Lastly activate the plugin. Upon activation, y'all can visit Settings > Meliorate Font Awesome page to configure the plugin settings. In most cases this is not needed as the plugin works out of the box, so yous won't need to change anything there.

Step ii – Calculation your font icons

Amend Font Awesome allows you to add font icons using diverse shortcodes like this:

[icon name="binoculars"]

[icon name="gift"]

[icon proper name="map"]

The icons tin also exist added in the post editor simply by selecting the desired icon. If you were to create a new postal service now, y'all'll discover a new icon in your postal service editor. Clicking on information technology will bring upwardly a popup where you can locate an icon and insert it.

Step 3 – Customize your font icons

The plugin will add a shortcode in your post and if you want to farther customize the icon, you can do so past adding your own CSS class to it, and then entering the specific styles in your stylesheet.

The default shortcode looks like this:

[icon name="coffee" grade="" unprefixed_class=""]

Once you add a class for styling purposes information technology looks similar this:

[icon proper name="coffee" class="" unprefixed_class=""]

One time y'all add a class for styling purposes information technology looks like this:

[icon proper noun="coffee" class="mycoffeeicon" unprefixed_class=""]

To mode it, go to Appearance > Editor and open your theme'southward stylesheet. Add the post-obit lines to information technology:

i.fa.fa-java.fa-mycoffeeicon {  font-size:100px;  color:#ba1157;  }

It's that simple.

Now let's see how to add FontAwesome manually.

Option 2 – Adding icon fonts in WordPress manually

Icon fonts are goose egg more than fonts consisting of icons. As such they can hands be added just as you would add together any custom fonts. Some icon fonts similar FontAwesome, are available from CDN servers across the web and tin can be linked from your WordPress theme directly.

You can likewise upload the unabridged font directory to a folder in your WordPress theme and then utilize those fonts in your stylesheet.

Let's embrace both methods here.

Method i – Adding lawmaking to your theme'due south header.php file

The easiest method is to include one line in your theme'south header.php file, just before the </head> tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Fifty-fifty though this is the easiest method, it's not really the proper WordPress mode and it can cause conflicts with other plugins. A much improve approach is to properly enqueue the stylesheet in WordPress via your functions.php file.

Click on Appearance > Editor so select your functions.php file. At the end, add the following lines:

function ala_load_fa() {  wp_enqueue_style( 'ala-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.iv.0/css/font-awesome.min.css' );  }  add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

One time you're washed, click on update file.

Method 2 – Add font icons to your WordPress theme's directory

The second method allows yous to have the icons readily bachelor in your theme and includes a fleck of legwork. First, y'all need to download the icon font and unzip the package. And then, use a program like FileZilla to connect to your website via FTP.

Go to your WordPress theme'south directory, create a new folder and name it fonts or fontawesome.

Then upload the contents of the icon fonts to the folder yous just created.

One time that is done, you'll need to add the fonts to your WordPress theme. Merely add this lawmaking to your theme's functions.php file.

part ala_load_fa() {  wp_enqueue_style( 'ala-fa', get_stylesheet_directory_uri() . '/fontawesome/css/font-awesome.min.css' );  }  add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

Click on update file and y'all will accept successfully loaded FontAwesome into your WordPress theme.

The final part is actually calculation icons into your WordPress theme, posts or pages.

You can do so manually by including the icon proper name anywhere you lot want it to display.

Get to Font Awesome's website to come across the full list of icons bachelor. Click on whatsoever icon you lot want to use, and you volition be able to see the icon proper name. Click on Copy to copy the icon name and then insert information technology in your mail service or page editor:

<i class="fa-coffee"></i>

Yous can also customize the icon in the stylesheet like nosotros've done above.

You can also combine dissimilar icons together and style them at once. This is useful if you want to for example create a list of links with icons next to them. Simply wrap them nether a div element with a specific grade similar and so:

<div class="my-icons"> <a course="icons-group-item" href="#"><i class="fa fa-apple fa-fw"></i>Home</a> <a class="icons-group-item" href="#"><i class="fa fa-bars fa-fw"></i>Library</a> <a class="icons-group-item" href="#"><i class="fa fa-asterisk fa-fw"></i>Applications</a> <a class="icons-grouping-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a> </div>        

Now yous can style them in your theme's stylesheet like this:

.icons-group-item i {  color: #333;  font-size: 50px;  }  .icons-group-item i:hover {  color: #ba1157;  }

Last thoughts

In a previous tutorial, we've shown y'all how to add together Dashicons to WordPress and how to apply them. Calculation FontAwesome is rather similar. Information technology'south a great way to brand your website more interesting and there are plenty of ways to employ icon fonts.

You can use them to mode your navigation menu, or add them to post titles. Y'all tin use them inside your posts, when you want to bring attention to something of import.

You tin can even add together them to your widgets since widgets accept HTML input. Consider how much more than your newsletter widget could be if you added an envelope icon to information technology? Or if you apply an writer box, you could use FontAwesome to display your social media profiles.

The best part is that no matter which device or which browser your visitors are using, they will always be able to see crisp, responsive icons.

mcbroomquitorger.blogspot.com

Source: https://bloggingwizard.com/fontawesome-wordpress/

Share this post