Michael Janea

 

 

FONTAWESOME

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

 

Features

Free Premium
FontAwesome Version Compatibility 4.3 only 4.0, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6 and 4.7
CKEditor Version Compatibility 4.2 and 4.3 only 4.0, 4.1, 4.2, 4.3, 4.4 and 4.5
Unicode
Available in 66 languages
Priority Support

 

Demo

 

Dependencies

It requires the following plugins to work: Widget, Line Utilities, and Color Dialog.

 

How to Install

  1. Extract the downloaded file (fontAwesome.zip)
  2. Copy the "fontAwesome" folder to "ckeditor/plugins/" folder
  3. Open the file "ckeditor/config.js"
  4. Add these lines:
    config.extraPlugins = 'widget,lineutils,fontAwesome';
    config.contentsCss = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css';
    config.allowedContent = true;
    config.fontAwesome_version = '4.6';
    config.fontAwesome_html_tag = 'i';
    config.fontAwesome_size = 'class';
    CKEDITOR.dtd.$removeEmpty['span'] = false;
    CKEDITOR.dtd.$removeEmpty['i'] = false;
    config.fontAwesome_unicode = false;
  5. In your HTML's <head> section add this code:
    • <script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
  6. Use the toolbargroupname: "FontAwesome" in your toolbar (see the example below)
    config.toolbar = [
        { name: 'insert', items: [ 'FontAwesome', 'Source' ] }
    ];
  7. Make sure to clear your browser's cache
  8. Done
  1. Extract the downloaded file (fontAwesome.zip)
  2. Copy the "fontAwesome" folder to "sites/all/modules/ckeditor/plugins/" folder
  3. Open the file "sites/all/modules/ckeditor/ckeditor.config.js"
  4. Add these lines:
    config.allowedContent = true;
    config.fontAwesome_version = '4.6';
    config.fontAwesome_html_tag = 'i';
    config.fontAwesome_size = 'class';
    CKEDITOR.dtd.$removeEmpty['span'] = false;
    CKEDITOR.dtd.$removeEmpty['i'] = false;
    config.fontAwesome_unicode = false;
  5. Open the file "sites/all/modules/ckeditor/css/ckeditor.css"
  6. Add this line at the top:
    @import  url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
  7. Make sure to clear your browser's cache
  8. Go to your Drupal's admin side -> Configuration -> Content Authoring -> CKEditor -> Profile -> Choose any profile you want and click "Edit" link -> Editor Appearance -> Available buttons -> Drag & drop fontAwesome icon to "Current Toolbar" -> click "Save"
  9. Done
Not yet supported
This plugin is not compatible with IPS. IPS strips out some important HTML tags and attributes.

 

More Set-up Information

Option Description
config.fontAwesome_version

FontAwesome version you are using

Choices: 4.0, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7
config.fontAwesome_html_tag

HTML tag to use

Default Value: <i> Choices: <i>, <span>
config.fontAwesome_size

sizing style

Default Value: class Choices: class, px
config.fontAwesome_unicode

set to true to use unicode and false to use classes

when set to true: <i class="fa">&#xf042;</i>
when set to false: <i class="fa fa-adjust"></i>

 

Logs

 

Package Details

INDIVIDUAL 

$3.00

 

  • Free updates for 6 months
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. FontAwesome Premium

INDIVIDUAL
+ UPDATES

$10.00

$18.00

  • Free updates for 6 months (?)
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. FontAwesome Premium

ULTIMATE BUNDLE

$99.00 (?)

$437.00

  • Free updates for 1 year (?)
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. MJ Bundle
      • MJ Accordion
      • MJ Breadcrumbs
      • MJ Buttons
      • MJ Carousel
      • MJ Tab
      • MJ Ribbons
      • MJ Word Art
      • MJ Accordion Banner
    2. Bootstrap Bundle
      • Bootstrap Breadcrumbs
      • Bootstrap Buttons
      • Bootstrap Carousel
      • Bootstrap Collapse
      • Bootstrap List Group
      • Bootstrap Panel
      • Bootstrap Tab
      • Bootstrap Alert
      • Bootstrap Grid
      • Bootstrap Dropdown Buttons
    3. Foundation Bundle
      • Foundation Accordion
      • Foundation Alert
      • Foundation Breadcrumbs
      • Foundation Buttons
      • Foundation Panel
      • Foundation Tab
    4. Social Media Bundle
      • Facebook Like
      • Facebook Share
      • Twitter Share
      • Google +1
      • Google+ Share
    5. jQuery UI Bundle
      • jQuery UI Accordion
      • jQuery UI Tabs
    6. Semantic UI Bundle
      • Semantic UI Accordion
      • Semantic UI Tab
      • Semantic UI Icons
    7. Text Shadow
    8. Box Shadow
    9. FontAwesome Premium
    10. Nivo Slider
    11. BlueImp Gallery
    12. YouTube Search

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.