未加星标

Icons for Everyone: How to Use Font Awesome With WordPress

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Font Awesome is one of the most popular icon fonts worldwide. By now, more than 60 million websites use the font to display pictograms in all colors and versions. These 60 million websites include whitehouse.gov, thebeatles.com, and washingtonpost.com. In this article, we’ll show you how you can use the icons for your blog.

Currently, Font Awesome provides 634 pictograms for a whole load of applications. For example, it is possible to use them to create social follow icons, like I did on my blog.


Icons for Everyone: How to Use Font Awesome With WordPress
The Advantages of the Icon Font “Font Awesome.”

In comparison to used graphics, an icon font offers generous benefits. Icons can be scaled wonderfully, making it possible to display them in any desired size. On top of that, you can adjust them, so they have the colors you want them to shine in.

This might be substantial for a business website if there is a corporate identity to stick to. Adjustments happenvia CSS. Thus, everything that CSS can do is possible. Size, colors, text shadow, and much more are all possible.

On the Following Page, You Get to Take a Look at All 634 Icons in an Overview .

How to Use Font Awesome in Your Theme

There are two options how to use the font in your theme. I will present them to you one by one. Which method you choose depends on whether you like the easier way of using plugins or the more tedious manual work. Either way, you’ll find the right method for you in this article.

1 Manual Work. We Only Link the CSS File

Before you get to use the icons, you need the CSS for the icon font. The CDN service provider KeyCDN has hosted the font on their servers. This way, a simple link to the file in your header’s website is sufficient. A small code snippet that you need to copy into your theme’s functions.php takes care of that.

You can choose between two methods. Code number one links the CSS file in your blog’s header. Code two is ideal if you want to optimize the speed of your website. Then, the file is loaded into the footer.

Now, you are already able to use the icons. You have two options for the manual application. Option number one is the <i> tag, provided for each icon by Font Awesome. Take a look at plenty of examples on the example page .


Icons for Everyone: How to Use Font Awesome With WordPress

Adjusting the Icon Size is This Simple.

However, you’re not tied to the <i> tag, but also able to define and use the icons in the CSS. This is useful for areas that don’t tolerate additional markup well. By the way, Less and Sass are supported just as well as pure CSS.

When you click an icon on the overview page of Font Awesome, you get to a page where the particular <i> tag is displayed. Above that, you’ll also find the so-called Unicode, which is required for the use in the CSS file.

A part of my CSS for the social follow buttons (screenshot above) looks as follows:

Find the Unicode Here:
Icons for Everyone: How to Use Font Awesome With WordPress
Using the Icon Font in the WordPress-Editor

Of course, you can also use the neat icons directly within the WordPress editor when writing your articles. To do that, you have to pay the text area a visit and enter the corresponding <i> tag where you want it to appear.

Visit the overview page of Font Awesome, pick an icon and click it. On the next page, you’ll find the proper tag for that icon.

2 Easy Peasy, Using the Plugin Better Font Awesome.
Icons for Everyone: How to Use Font Awesome With WordPress
Developer: Mickey Kay Work in progress: yes Latest version from: 06.01.2016 Costs: free via WordPress.org License: GNU GENERAL PUBLIC LICENSE Known compatibility issues: unknown Developer Homepage:Unknown Download on WordPress.org

Using this plugin won’t slow down your blog, as the necessary CSS file is loaded via jsDelivr CDN . The plugin is perfect for WordPress beginners, as it doesn’t require any programming knowledge.

With this plugin, using the icons is very easy. There are three ways to use them.

Number 1:Directly Within the WordPress Editor With a Comfortable Generator.


Icons for Everyone: How to Use Font Awesome With WordPress

Number 2:Using Shortcodes

[icon name="flag" class="2x spin border"]

Number 3:The Well-Known HTML-Tag

<i class="fa fa-check-square-o" aria-hidden="true"></i> The Plugin Settings:

Find the settings under Settings =>Better Font Awesome .


Icons for Everyone: How to Use Font Awesome With WordPress

Here, you can choose which version of Font Awesome you want to use. The newest version, currently version 4.6.3, is recommended. The second option makes for a compressed CSS file that loads faster. You should tick that off.

The third option makes it so that other Font Awesome files that are used by other plugins are removed from “Better Font Awesome.” You should tick that off as well, as one version of the file is entirely sufficient.

The fourth area in the settings is a help for you if you want to use the shortcode or the HTML tag.

There’s a javascript Version as Well

Right. It exists. You can enter your email address under the menu item “get started,” to receive a JavaScript code that always keeps the icon font up to date.


Icons for Everyone: How to Use Font Awesome With WordPress

However, this code has a huge downside. Although you can make sure that the code is delivered asynchronously after the registration, it still loads rather slowly. I have tried it for this article, and I was not impressed. My website was 400 milliseconds slower than it is with a linked CSS file.

Thus, I can’t recommend this variant. Conclusion

Now, I introduced you to two ways of using the cool icons of Font Awesome. Whether you prefer the manual or the plugin version is up to you. I recommend both variants, excluding only the JavaScript version.

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

主题: CSSJavaScriptJavaCDNHTMLWordUB
分页:12
转载请注明
本文标题:Icons for Everyone: How to Use Font Awesome With WordPress
本站链接:http://www.codesec.net/view/483161.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(29)