Better Font Awesome - Version 0.9.0

Version Description

  • First release!

=

Download this release

Release Info

Developer McGuive7
Plugin Icon 128x128 Better Font Awesome
Version 0.9.0
Comparing to
See all releases

Version 0.9.0

Files changed (5) hide show
  1. Titan-Framework +1 -0
  2. better-font-awesome.php +371 -0
  3. inc/css/admin-styles.css +27 -0
  4. inc/js/tinymce-icons.js +43 -0
  5. readme.txt +108 -0
Titan-Framework ADDED
@@ -0,0 +1 @@
 
1
+ Subproject commit 5dfdb1441894850f74e1ef5f4e502947e3b556f0
better-font-awesome.php ADDED
@@ -0,0 +1,371 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /*
3
+ * Plugin Name: Better Font Awesome
4
+ * Plugin URI: http://wordpress.org/plugins/better-font-awesome
5
+ * Description: The better Font Awesome icon plugin for Wordpress.
6
+ * Version: 0.9.0
7
+ * Author: Mickey Kay
8
+ * Author URI: mickey@mickeykaycreative.com
9
+ * License: GPLv2+
10
+ * Text Domain: bfa
11
+ * Domain Path: /languages
12
+ */
13
+
14
+ /**
15
+ * Copyright (c) 2014 Mickey Kay & MIGHTYminnow (email : mickey@mickeykaycreative.com)
16
+ *
17
+ * This program is free software; you can redistribute it and/or modify
18
+ * it under the terms of the GNU General Public License, version 2 or, at
19
+ * your discretion, any later version, as published by the Free
20
+ * Software Foundation.
21
+ *
22
+ * This program is distributed in the hope that it will be useful,
23
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
24
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
25
+ * GNU General Public License for more details.
26
+ *
27
+ * You should have received a copy of the GNU General Public License
28
+ * along with this program; if not, write to the Free Software
29
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
30
+ */
31
+
32
+ /**
33
+
34
+ TODO:
35
+ - Make sure all icons are showing
36
+ - Make backwards compatible for all shortcodes including "FA Icons", "FA More", and "FA Shortcodes"
37
+
38
+ **/
39
+
40
+ /*--------------------------------------------*
41
+ * Titan Framework
42
+ *--------------------------------------------*/
43
+ /*
44
+ * When using the embedded framework, use it only if the framework
45
+ * plugin isn't activated.
46
+ */
47
+
48
+ // Don't do anything when we're activating a plugin to prevent errors
49
+ // on redeclaring Titan classes
50
+ if ( ! empty( $_GET['action'] ) && ! empty( $_GET['plugin'] ) ) {
51
+ if ( $_GET['action'] == 'activate' ) {
52
+ return;
53
+ }
54
+ }
55
+ // Check if the framework plugin is activated
56
+ $useEmbeddedFramework = true;
57
+ $activePlugins = get_option('active_plugins');
58
+ if ( is_array( $activePlugins ) ) {
59
+ foreach ( $activePlugins as $plugin ) {
60
+ if ( is_string( $plugin ) ) {
61
+ if ( stripos( $plugin, '/titan-framework.php' ) !== false ) {
62
+ $useEmbeddedFramework = false;
63
+ break;
64
+ }
65
+ }
66
+ }
67
+ }
68
+ // Use the embedded Titan Framework
69
+ if ( $useEmbeddedFramework && ! class_exists( 'TitanFramework' ) ) {
70
+ require_once( plugin_dir_path( __FILE__ ) . 'titan-framework/titan-framework.php' );
71
+ }
72
+
73
+ /**
74
+ * Better Font Awesome plugin class
75
+ */
76
+ class BetterFontAwesome {
77
+
78
+ /*--------------------------------------------*
79
+ * Constants
80
+ *--------------------------------------------*/
81
+ const name = 'Better Font Awesome';
82
+ const slug = 'better-font-awesome';
83
+
84
+
85
+ /*--------------------------------------------*
86
+ * variables
87
+ *--------------------------------------------*/
88
+ protected $cdn_data, $titan, $version, $prefix, $minified;
89
+
90
+ /**
91
+ * Constructor
92
+ */
93
+ function __construct() {
94
+ // Register an activation hook for the plugin
95
+ register_activation_hook( __FILE__, array( $this, 'install' ) );
96
+
97
+ // Setup Titan instance
98
+ $this->titan = TitanFramework::getInstance( 'better-font-awesome' );
99
+
100
+ // Get CDN data
101
+ $this->setup_cdn_data();
102
+
103
+ // Do options page
104
+ $this->do_options_page();
105
+
106
+ // Hook up to the init action - on 11 to make sure it loads after other FA plugins
107
+ add_action( 'init', array( $this, 'init' ), 11 );
108
+
109
+ // Do scripts and styles
110
+ add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts_and_styles' ), 11 );
111
+ add_action( 'admin_enqueue_scripts', array( $this, 'register_scripts_and_styles' ), 11 );
112
+ add_action( 'admin_enqueue_scripts', array( $this, 'custom_admin_css' ), 11 );
113
+
114
+ }
115
+
116
+ /**
117
+ * Runs when the plugin is activated
118
+ */
119
+ function install() {
120
+ // do not generate any output here
121
+ }
122
+
123
+ /**
124
+ * Runs when the plugin is initialized
125
+ */
126
+ function init() {
127
+
128
+ // Setup localization
129
+ load_plugin_textdomain( self::slug, false, dirname( plugin_basename( __FILE__ ) ) . '/languages' );
130
+
131
+ // Register the shortcode [icon]
132
+ add_shortcode( 'icon', array( $this, 'render_shortcode' ) );
133
+
134
+ // Set Font Awesome variables (stylesheet url, prefix, etc)
135
+ $this->setup_global_variables();
136
+
137
+ // Add PHP variables in head for use by TinyMCY JavaScript
138
+ foreach( array('post.php','post-new.php') as $hook ) {
139
+ add_action( "admin_head-$hook", array( $this, 'admin_head_variables' ) );
140
+
141
+ if ( ( current_user_can('edit_posts') || current_user_can('edit_pages') ) &&
142
+ get_user_option('rich_editing') ) {
143
+ add_filter( 'mce_external_plugins', array( $this, 'register_tinymce_plugin' ) );
144
+ add_filter( 'mce_buttons', array( $this, 'add_tinymce_buttons' ) );
145
+ }
146
+ }
147
+
148
+ // Add Font Awesome stylesheet to TinyMCE
149
+ add_editor_style( $this->stylesheet_url );
150
+
151
+ }
152
+
153
+ /**
154
+ * Get CDN data and prefix based on selected version
155
+ */
156
+ function setup_cdn_data() {
157
+ $remote_data = wp_remote_get( 'http://api.jsdelivr.com/v1/bootstrap/libraries/font-awesome/' );
158
+ $this->cdn_data = json_decode( wp_remote_retrieve_body( $remote_data ) )[0];
159
+ }
160
+
161
+ /*
162
+ * Set the Font Awesome stylesheet url to use based on the settings
163
+ */
164
+ function setup_global_variables() {
165
+ $this->version = $this->titan->getOption( 'version' );
166
+ $this->minified = $this->titan->getOption( 'minified' );
167
+
168
+ // Get latest version if need be
169
+ if ( 'latest' == $this->version )
170
+ $this->version = $this->cdn_data->lastversion;
171
+
172
+ $stylesheet = $this->minified ? '/css/font-awesome.min.css' : '/css/font-awesome.css';
173
+ $this->stylesheet_url = '//netdna.bootstrapcdn.com/font-awesome/' . $this->version . $stylesheet;
174
+
175
+ // Set proper prefix based on version
176
+ if ( 0 <= version_compare( $this->version, '4' ) )
177
+ $this->prefix = 'fa-';
178
+ elseif ( 0 <= version_compare( $this->version, '3' ) )
179
+ $this->prefix = 'icon-';
180
+ }
181
+
182
+ function do_options_page() {
183
+
184
+ // Setup available versions
185
+ $versions[ 'latest' ] = __( 'Latest', 'better-font-awesome' ) . ' (' . $this->cdn_data->lastversion . ')';
186
+
187
+ foreach( $this->cdn_data->versions as $version ) {
188
+ // Exclude v2.0
189
+ if ( '2' != substr( $version, 0, 1 ) )
190
+ $versions[$version] = $version;
191
+ }
192
+
193
+ $optionsPage = $this->titan->createAdminPanel( array(
194
+ 'name' => __( 'Better Font Awesome', 'better-font-awesome'),
195
+ 'parent' => 'options-general.php',
196
+ ) );
197
+
198
+ $optionsPage->createOption( array(
199
+ 'name' => __( 'Font Awesome version', 'better-font-awesome' ),
200
+ 'id' => 'version',
201
+ 'type' => 'select',
202
+ 'desc' => __( 'Select the version of Font Awesome you would like to use. Visit the <a href="http://fontawesome.io/" target="_blank">Font Awesome website</a> for more information.', 'better-font-awesome') ,
203
+ 'options' => $versions,
204
+ 'default' => $this->cdn_data->lastversion,
205
+ ) );
206
+
207
+ $optionsPage->createOption( array(
208
+ 'name' => __( 'Use minified CSS', 'better-font-awesome' ),
209
+ 'id' => 'minified',
210
+ 'type' => 'checkbox',
211
+ 'desc' => __( 'Whether to include the minified version of the CSS (checked), or the unminified version (unchecked).', 'better-font-awesome' ),
212
+ 'default' => true,
213
+ ) );
214
+
215
+ $optionsPage->createOption( array(
216
+ 'name' => __( 'Remove existing Font Awesome styles', 'better-font-awesome' ),
217
+ 'id' => 'remove_existing_fa',
218
+ 'type' => 'checkbox',
219
+ 'desc' => __( 'Remove Font Awesome CSS included by other plugins and themes. This may help if icons are not rendering as expected.', 'better-font-awesome' ),
220
+ 'default' => false,
221
+ ) );
222
+
223
+ $optionsPage->createOption( array(
224
+ 'name' => __( 'Usage', 'better-font-awesome' ),
225
+ 'type' => 'note',
226
+ 'desc' => __( '
227
+ <b>Version 4</b>&nbsp;&nbsp;&nbsp;<small><a href="http://fontawesome.io/examples/">See all available classes &raquo;</a></small><br /><br />
228
+ <i class="icon-star fa fa-star"></i> <code>[icon name="star"]</code> or <code>&lt;i class="fa-star"&gt;&lt;/i&gt;</code><br /><br />
229
+ <i class="icon-star fa fa-star icon-2x fa-2x"></i> <code>[icon name="star" class="fa-2x"]</code> or <code>&lt;i class="fa-star fa-2x"&gt;&lt;/i&gt;</code><br /><br />
230
+ <i class="icon-star fa fa-star icon-2x fa-2x icon-border fa-border"></i> <code>[icon name="star" class="fa-2x fa-border"]</code> or <code>&lt;i class="fa-star fa-2x fa-border"&gt;&lt;/i&gt;</code><br /><br /><br />
231
+ <b>Version 3</b>&nbsp;&nbsp;&nbsp;<small><a href="http://fontawesome.io/3.2.1/examples/">See all available classes &raquo;</a></small><br /><br />
232
+ <i class="icon-star fa fa-star"></i> <code>[icon name="star"]</code> or <code>&lt;i class="icon-star"&gt;&lt;/i&gt;</code><br /><br />
233
+ <i class="icon-star fa fa-star icon-2x fa-2x"></i> <code>[icon name="star" class="icon-2x"]</code> or <code>&lt;i class="icon-star icon-2x"&gt;&lt;/i&gt;</code><br /><br />
234
+ <i class="icon-star fa fa-star icon-2x fa-2x icon-border fa-border"></i> <code>[icon name="star" class="icon-2x icon-border"]</code> or <code>&lt;i class="icon-star icon-2x icon-border"&gt;&lt;/i&gt;</code>
235
+
236
+ ', 'better-font-awesome' ),
237
+ ) );
238
+
239
+ $optionsPage->createOption( array(
240
+ 'type' => 'save',
241
+ ) );
242
+ }
243
+
244
+ /**
245
+ * Output [icon] shortcode
246
+ *
247
+ * Example:
248
+ * [icon name="flag" class="fw 2x spin"]
249
+ *
250
+ * @param array $atts Shortcode attributes
251
+ * @return string <i> Font Awesome output
252
+ */
253
+ function render_shortcode( $atts ) {
254
+ extract(shortcode_atts(array(
255
+ 'name' => '',
256
+ 'class' => '',
257
+ 'title' => '', /* For compatibility with other plugins */
258
+ 'size' => '', /* For compatibility with other plugins */
259
+ 'space' => '',
260
+ ), $atts)
261
+ );
262
+
263
+ // Include for backwards compatibility with Font Awesome More Icons plugin
264
+ $title = $title ? 'title="' . $title . '" ' : '';
265
+ $space = 'false' == $space ? '' : '&nbsp;';
266
+ $size = $size ? ' '. $this->prefix . $size : '';
267
+
268
+ // Remove "icon-" and "fa-" from name
269
+ // This helps both:
270
+ // 1. Incorrect shortcodes (when user includes full class name including prefix)
271
+ // 2. Old shortcodes from other plugins that required prefixes
272
+ $name = str_replace( 'icon-', '', $name );
273
+ $name = str_replace( 'fa-', '', $name );
274
+
275
+ // Add prefix to name
276
+ $icon_name = $this->prefix . $name;
277
+
278
+ // Remove "icon-" and "fa-" from classes
279
+ $class = str_replace( 'icon-', '', $class );
280
+ $class = str_replace( 'fa-', '', $class );
281
+
282
+ // Remove extra spaces from class
283
+ $class = trim( $class );
284
+ $class = preg_replace('/\s{3,}/',' ', $class );
285
+
286
+ // Add prefix to each class (separated by space)
287
+ $class = ' ' . $this->prefix . str_replace( ' ', ' ' . $this->prefix, $class );
288
+
289
+ return '<i class="fa ' . $icon_name . $class . $size . '" ' . $title . '>' . $space . '</i>';
290
+ }
291
+
292
+ /**
293
+ * Registers and enqueues stylesheets for the administration panel and the
294
+ * public facing site.
295
+ */
296
+ function register_scripts_and_styles() {
297
+ // Deregister any existing Font Awesome CSS (including Titan Framework)
298
+ if ( $this->titan->getOption( 'remove_existing_fa' ) ) {
299
+ wp_dequeue_style( 'tf-font-awesome' );
300
+ wp_dequeue_style( 'font-awesome' );
301
+ }
302
+
303
+ // Enqueue Font Awesome CSS
304
+ wp_register_style( 'font-awesome', $this->stylesheet_url, '', $this->version );
305
+ wp_enqueue_style( 'font-awesome' );
306
+ }
307
+
308
+ /*
309
+ * Load admin CSS
310
+ */
311
+ function custom_admin_css() {
312
+ wp_enqueue_style( 'bfa-admin-styles', plugins_url( 'inc/css/admin-styles.css', __FILE__ ) );
313
+ }
314
+
315
+ function register_tinymce_plugin( $plugin_array ) {
316
+ $plugin_array['font_awesome_icons'] = plugins_url('inc/js/tinymce-icons.js', __FILE__ );
317
+
318
+ return $plugin_array;
319
+ }
320
+
321
+ function add_tinymce_buttons( $buttons ) {
322
+ array_push($buttons, '|', 'fontAwesomeIconSelect');
323
+
324
+ return $buttons;
325
+ }
326
+
327
+ /**
328
+ * Add PHP variables in head for use by TinyMCE JavaScript
329
+ */
330
+ function admin_head_variables() {
331
+
332
+ // Get Font Awesome CSS
333
+ if( isset( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] == "on" )
334
+ $prefix = 'https:';
335
+ else
336
+ $prefix = 'http:';
337
+
338
+ $remote_data = wp_remote_get( $prefix . $this->stylesheet_url );
339
+ $css = wp_remote_retrieve_body( $remote_data );
340
+
341
+ // Get all CSS selectors that have a content: pseudo-element rule
342
+ preg_match_all('/(\.[^}]*)\s*{\s*(content:)/s', $css, $matches );
343
+ $selectors = $matches[1];
344
+
345
+ // Select all icon- and fa- selectors from and split where there are commas
346
+ foreach ( $selectors as $selector ) {
347
+ preg_match_all('/\.(icon-|fa-)([^,]*)\s*:before/s', $selector, $matches );
348
+ $clean_selectors = $matches[2];
349
+
350
+ // Create array of selectors
351
+ foreach( $clean_selectors as $clean_selector )
352
+ $classes[] = $clean_selector;
353
+ }
354
+
355
+ // Alphabetize & join with comma for use in JS array
356
+ sort( $classes );
357
+ $classes = implode( ",", $classes );
358
+ ?>
359
+ <!-- Pass $classes variable so it is accessible to TinyMCE JavaScript -->
360
+ <script type='text/javascript'>
361
+ var bfa_vars = {
362
+ 'fa_prefix': '<?php echo $this->prefix; ?>',
363
+ 'fa_icons': '<?php echo $classes; ?>',
364
+ };
365
+ </script>
366
+ <!-- TinyMCE Shortcode Plugin -->
367
+ <?php
368
+ }
369
+
370
+ }
371
+ $better_font_awesome = new BetterFontAwesome();
inc/css/admin-styles.css ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Options page */
2
+ .settings_page_options-general-better-font-awesome .titan-framework-panel-wrap [class*="icon-"],
3
+ .settings_page_options-general-better-font-awesome .titan-framework-panel-wrap [class*="fa-"] {
4
+ display: inline-block;
5
+ width: 44px;
6
+ margin-right: 10px;
7
+ text-align: center;
8
+ vertical-align: middle;
9
+ -webkit-box-sizing: border-box;
10
+ -moz-box-sizing: border-box;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ /* TinyMCE */
15
+
16
+ /* Override editor rules blocking these native Font Awesome styles */
17
+ #menu_content_content_fontAwesomeIconSelect_menu .icon-fw,
18
+ #menu_content_content_fontAwesomeIconSelect_menu .fa-fw {
19
+ display: inline-block;
20
+ width: 1.2857142857142858em;
21
+ }
22
+
23
+ #content_fontAwesomeIconSelect_text:before {
24
+ content: "\f024";
25
+ margin-right: .5em;
26
+ font-family: FontAwesome;
27
+ }
inc/js/tinymce-icons.js ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ (function() {
2
+
3
+ if( typeof bfa_vars != 'undefined' ) {
4
+ var icons = bfa_vars.fa_icons.split(',');
5
+ var prefix = bfa_vars.fa_prefix;
6
+
7
+ var icon_i = function(id) {
8
+ return '<i class="fa ' + prefix + 'fw ' + prefix + id + '"></i>';
9
+ }
10
+
11
+ var icon_shortcode = function(id) {
12
+ return '[icon name="' + id + '" class=""]';
13
+ }
14
+
15
+ var createControl = function(name, controlManager) {
16
+ if (name != 'fontAwesomeIconSelect') return null;
17
+ var listBox = controlManager.createListBox('fontAwesomeIconSelect', {
18
+ title: 'Icons',
19
+ onselect: function(v) {
20
+ var editor = this.control_manager.editor;
21
+ if (v) {
22
+ editor.selection.setContent(icon_shortcode(v));
23
+ }
24
+ return false;
25
+ }
26
+ });
27
+
28
+ for (var i = 0; i < icons.length; i++) {
29
+ var _id = icons[i];
30
+ listBox.add(icon_i(_id) + ' ' + _id, _id);
31
+ }
32
+
33
+ return listBox;
34
+ };
35
+
36
+ tinymce.create('tinymce.plugins.FontAwesomeIconPlugin', {
37
+ createControl: createControl
38
+ });
39
+
40
+ tinymce.PluginManager.add('font_awesome_icons', tinymce.plugins.FontAwesomeIconPlugin);
41
+
42
+ }
43
+ })();
readme.txt ADDED
@@ -0,0 +1,108 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Better Font Awesome ===
2
+ Contributors: McGuive7, MIGHTYminnow
3
+ Tags: better, font, awesome, icon, bootstrap, fontstrap, cdn, shortcode
4
+ Donate link: http://mightyminnow.com
5
+ Requires at least: 3.0
6
+ Tested up to: 3.8.1
7
+ Stable tag: 0.9.0
8
+ License: GPLv2+
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ The Better Font Awesome plugin for WordPress. Shortcodes, HTML, TinyMCE, various Font Awesome versions, backwards compatibility, CDN speeds, and more.
12
+
13
+ == Description ==
14
+
15
+ Better Font Awesome gives you easy access to the full [Font Awesome](http://fortawesome.github.io/Font-Awesome/ "Font Awesome icon website") icon library using shortcodes, HTML, and TinyMCE, and allows you to update your version of Font Awesome without having to change your existing shortcodes.
16
+
17
+
18
+ = Features =
19
+
20
+ * **Choose your version** - automatically checks the [Font Awesome CDN](http://www.bootstrapcdn.com/#fontawesome_tab "Font Awesome CDN") for all available versions, and lets you choose which one you want to use from a simple drop down menu. You also have the option to choose "Latest," which means the plugin will automatically switch to the latest version of Font Awesome as soon as it's released.
21
+
22
+ * **Backwards compatible** - shortcode output is automatically updated depending on which version you choose, meaning that you can switch versions without having to modify your shortcodes.
23
+
24
+ * **Compatible with other plugins** - designed to work with shortcodes generated with plugins like [Font Awesome Icons](http://wordpress.org/plugins/font-awesome/ "Font Awesome Icons"), [Font Awesome More Icons](https://wordpress.org/plugins/font-awesome-more-icons/ "Font Awesome More Icons"), and [Font Awesome Shortcodes](https://wordpress.org/plugins/font-awesome-shortcodes/), so you can switch to Better Font Awesome and your existing shortcodes will still work.
25
+
26
+ * **CDN speeds** - utilizes CSS &amp; font files hosted by the excellent [Bootstrap CDN](http://www.bootstrapcdn.com/ "Bootstrap CDN"), which means super-fast load times.
27
+
28
+ = Settings =
29
+ All settings can be adjusted via **Settings &rarr; Better Font Awesome**.
30
+
31
+ = Usage =
32
+ Better Font Awesome can be used in 3 different ways: shortcode, HTML, and TinyMCE
33
+
34
+ = 1. Shortcode =
35
+ `[icon name="flag" class="2x spin border" space="false"]`
36
+
37
+ The `name` attribute is simply the name of the icon, and the `class` attribute can include any of the available Font Awesome classes listed on the Font Awesome [Examples Page](http://fortawesome.github.io/Font-Awesome/examples/ "Font Awesome Examples"). The optional `space` attribute can be set to "false" to omit the space that is included after the icon by default.
38
+
39
+ Prefixes (`icon-` and `fa-`) are not necessary for shortcode usage. What's great is that Better Font Awesome will automatically remove and replace prefixes depending on the Font Awesome version you choose. So if you have existing Font Awesome shortcodes *with prefixes* (from other plugins, for example), they'll still work just fine.
40
+
41
+ That means that the following shortcodes will all work, regardless of what version of Font Awesome you choose:
42
+ `[icon name="flag" class="2x spin border"]`
43
+ `[icon name="icon-flag" class="icon-2x icon-spin icon-border"]`
44
+ `[icon name="fa-flag" class="fa-2x fa-spin fa-border"]`
45
+ `[icon name="icon-flag" class="fa-2x spin icon-border"]`
46
+
47
+ *Note: icon names and classes will only work for Font Awesome versions in which they are included.*
48
+
49
+ = 2. HTML =
50
+ Note that prefixes are required for HTML usage, and are version-specific. For this reason, shortcode usage is encouraged over HTML.
51
+
52
+ Version 4:
53
+ `<i class="fa-flag fa-2x fa-spin fa-border"></i>`
54
+
55
+ Version 3:
56
+ `<i class="icon-flag icon-2x icon-spin icon-border"></i>`
57
+
58
+ = 3. TinyMCE =
59
+ Better Font Awesome also provides you with an easy-to-use drop down menu in the default WordPress TinyMCE, which you can use to automatically generate shortcodes for the icons you want. This drop-down list will automatically update with all available icons for whichever version you choose. Check out our [Screenshots](https://wordpress.org/plugins/better-font-awesome/screenshots/ "Screenshots") to see what it looks like.
60
+
61
+ = Credits =
62
+ Many thanks to the following plugins and their authors:
63
+
64
+ * [Font Awesome Icons](http://wordpress.org/plugins/font-awesome/ "Font Awesome Icons") by [Rachel Baker](http://rachelbaker.me/ "Rachel Baker")
65
+ * [Font Awesome More Icons](https://wordpress.org/plugins/font-awesome-more-icons/ "Font Awesome More Icons") by [Web Guys](http://webguysaz.com/ "Web Guys")
66
+ * [Font Awesome Shortcodes](https://wordpress.org/plugins/font-awesome-shortcodes/) by [FoolsRun](https://profiles.wordpress.org/foolsrun/ "FoolsRun")
67
+
68
+
69
+ == Installation ==
70
+
71
+ This section describes how to install the plugin and get it working.
72
+
73
+ 1. Upload Font Awesome Icons to the /wp-content/plugins/ directory.
74
+ 1. Activate the plugin through the 'Plugins' menu in WordPress.
75
+ 1. That's it! Now you can use 3 different methods (shortcode, HTML, TinyMCE) to insert Font Awesome icons, all outlined in the [Description](https://wordpress.org/plugins/better-font-awesome "Description") section.
76
+
77
+
78
+ == Frequently Asked Questions ==
79
+
80
+ = How is this plugin different from other Font Awesome plugins? =
81
+
82
+ This plugin is unique in that it automatically pulls in *all* available versions of Font Awesome, meaning you never have to wait for the plugin developer to add the latest version. Furthermore, Better Font Awesome is designed to work with a wide variety of shortcode formats used by other Font Awesome plugins - this means that you can easily switch to Better Font Awesome (if, for example, you need to include icons from the most recent version of Font Awesome, which isn't always available with other plugins), and they will still work.
83
+
84
+ = Do I have to install any font files? =
85
+
86
+ Nope. Better Font Awesome automatically pulls in everything you need, and it does it from the lightning-fast Bootstrap CDN.
87
+
88
+ = What happens if I have another plugin/theme that uses Font Awesome? =
89
+
90
+ Better Font Awesome does it's best to load after any existing Font Awesome CSS, which can minimize conflicts. If you are experiencing any unexpected behavior resulting from plugin/theme conflicts, you can try checking the box to "Remove existing Font Awesome styles" in under **Settings &rarr; Better Font Awesome**.
91
+
92
+
93
+ == Screenshots ==
94
+
95
+ 1. Better Font Awesome settings, accessed via Settings &rarr; Better Font Awesome
96
+ 2. Using Better Font Awesome via TinyMCE
97
+
98
+
99
+ == Changelog ==
100
+
101
+ = 0.9.0 =
102
+ * First release!
103
+
104
+
105
+ == Upgrade Notice ==
106
+
107
+ = 0.9.0 =
108
+ * First release!