CKEditor 4

Font Awesome fortyTwo

Font Awesome plugin supporting FA v4 through v6, free and pro.

- icon list pulled from FontAwesome CSS file being used
- Brand checkbox

- styling, effects, transformations and animations available in relation to FA version being used:
  - font styles: solid, regular, light, thin, duotone, and newer sharp
  - FA font-sizes
  - rotate, spin, flip, beat, fade, etc..

Installation

Download and extract the plugin. Upload the /fa42 directory to your editor's /plugins/ directory

* fa42 requires the colordialog plugin, download and install if necessary

Add the plugin(s) to your editor config:

config.extraPlugins = 'colordialog,fa42'

CKEditor tends to remove most empty tags. While the "fix" for this is varied, this seems to work. Note to add the removeEmpty before the actual editor config:

CKEDITOR.dtd.$removeEmpty['i'] = 1; // replace or duplicate if you want to use <span> or any other tag instead of <i>

CKEDITOR.editorConfig = function( config ) { 
//...
}

 

Configuration

By default the plugin will use the <i> tag for icons, and Font Awesome version 6.4 Free from CDN. Configuration options are available to change these settings:

config.fa42 = {
  fa42Tag: 'span', // use <span> instead of <i>
  fa42Path: 'path/to/your/fontawesome.css', // link to a different local or remote version
  fa42Version: '8.4.2', // the plugin will try to auto-detect versioning and free/pro, but you can specify version here if auto-detection seems to not work
  fa42Level: 'pro', // free or pro, again in case auto-detection doesn't work
};

 

 

 

Screenshots

carousel
carousel
Download Add to my editor
fa42

60 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0.2

Download• Release notes

Re-coded ES6 JavaScript, validate plugin with CKBuilder

FontAwesome6

FontAwesome6 (free) allows you to insert formatted Font Awesome 6 into your text in CKEditor.

Install:

  1. add in your html page all.min.css
  2. add in your config.js from ckeditor folder:
  • config.extraPlugins = 'ckeditorfa';
  • config.allowedContent = true;
  • config.contentsCss = '/{your_path}/all.min.css';

CKEDITOR.dtd.$removeEmpty['span'] = false;
 

For Font Awesome 4.7 use this plugin: https://ckeditor.com/cke4/addon/ckeditorfa-0

For Font Awesome 5.15 use this plugin: https://ckeditor.com/cke4/addon/ckeditorfa5

 

Screenshots

carousel
Download Add to my editor
ckeditorfasix

2,090 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.8

Download• Release notes

Upgrade to Font Awesome 6.4.2

ckeditor add class

This plugin allows you to add class to element. In toolbar you can add dropdown to which can have classes. And on selecting value from dropdown class will be added to current selected element.

Screenshots

carousel
Download Add to my editor

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0.1

Download• Release notes

The first minor release 1.0.1

Font Awesome 5 (Pro and Free)

Font Awesome 5 Icons plugin for CKeditor 4. Includes all the icons of Font awesome 5.13.0

Now supports the pro and free edition. When you uses an older version you can give the version number in de configs and the icons which are not present in this version wil not be shown.

Installation:

  • Add the fontawesome5 directory in the plugins folder of CKeditor 4.
  • Add 'fontawesome5' item to your toolbar
  • Add 'fontawesome5' item to your extra plugins
  • Configure the fontawesome settings in: config.fontawesome : { }
  • config.allowedContent = true;
  • $removeEmpty['span'] = false; Thats it.

Config options:
config.fontawesome : {

'path': 'path-to-you-all.css-file',
'version': '5.13.0',
'edition': 'pro', (default: pro, options: free,pro)
'element': 'span' (default span, options, all html elements such as i,div,span,a,p, etc..)

}

When you use an other element, don't forget to use $removeEmpty for the element.

Example:

  • config.toolbar = [['Source', '-', 'NewPage', '-', 'Templates','fontawesome5']];
  • config.extraPlugins = 'fontawesome5';
  • config.fontawesome = { 'path':'/path/to/your/font-awesome-5/all.css', 'version':'5.13.0', 'edition':'pro', 'element':'i' };
  • CKEDITOR.replace(editorname, config);
  • CKEDITOR.dtd.$removeEmpty['i'] = false;

For the latest version, go to my github:

https://github.com/daanwilson/cke-fontawesome5

Like the plugin? Please by me a beer

 

Screenshots

carousel
carousel
carousel
Download Add to my editor
fontawesome5

4,851 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.1.3

Download• Release notes

Stylesheet modification for icons presentation

FontAwesome5

FontAwesome5 (free) allows you to insert formatted Font Awesome 5.x into your text in CKEditor.

Install:

  1. add in your html page all.min.css
  2. add in your config.js from ckeditor folder:
  • config.extraPlugins = 'ckeditorfa';
  • config.allowedContent = true;
  • config.contentsCss = '/{your_path}/all.min.css';

CKEDITOR.dtd.$removeEmpty['span'] = false;
 

For Font Awesome 4.7 use this plugin: https://ckeditor.com/cke4/addon/ckeditorfa-0

For Font Awesome 6.x use this plugin: https://ckeditor.com/cke4/addon/ckeditorfasix

Screenshots

carousel
Download Add to my editor
ckeditorfa5

6,981 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 5.18

Download• Release notes

Compatible with Font Awesome 5.15.x

Modified select icon function

FontAwesome

FontAwesome allows you to insert formatted Font Awesome icon (version 4.7) into your text in CKEditor.

Install:

  1. add in your html page font-awesome.min.css
  2. add in your config.js from ckeditor folder:
  • config.extraPlugins = 'ckeditorfa';
  • config.allowedContent = true;
  • config.contentsCss = '/{your_path}/font-awesome.min.css';

CKEDITOR.dtd.$removeEmpty['span'] = false;

For Font Awesome 5.x use this plugin: https://ckeditor.com/cke4/addon/ckeditorfa5

For Font Awesome 6.x use this plugin: https://ckeditor.com/cke4/addon/ckeditorfasix

Screenshots

carousel
Download Add to my editor
ckeditorfa

8,749 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 2.4

Download• Release notes

Added several option settings.

Improved klick function.

Gallery

Make your product and company images come to life with a beautiful Pinterest-style gallery or lookbook.

  • Upload photos to create a product grid gallery or lookbook, press galleries, a gallery for your team, or a user testimonial gallery.
  • Add titles and caption text.
  • Use call-to-action buttons to direct users to another page.
  • Add alt text to each photo to optimize images for SEO.
  • Enable a lightbox popup to let customers take a closer look at your photos.
  • Text search to let users filter your gallery entries (photos) by keywords in the captions.
  • Highly customizable design: adjust spacing between gallery entries, choose ideal photo size, add borders, pick custom fonts for captions, and more.
  • Supports text in any language.
  • Mobile responsive on any device.
  • Get instant access to 50+ POWr plugins, such as Social Feed for fresh content on your site and Popup for stellar landing page conversion to complement Photo Gallery.

Customer Support You Can Count On

If you have any questions or need help getting Photo Gallery up and running, we’re here to help! Please visit our Help Center for tips, support, and answers to common questions.

Screenshots

carousel
carousel
carousel
carousel
Download Add to my editor
powrmediagallery

11,811 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0

Download• Release notes

This is version 1.0 for POWr Gallery.

Spacing Sliders

Combined slider controls to adjust 'line-height' and 'letter-spacing' CSS values of text.

Screenshots

carousel
Download Add to my editor
spacingsliders

5,353 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.3

Download• Release notes

* Make slider ranges configurable.

* Fixes an error when attempting to move sliders before focusing the editing area.

Computed Font

Modified version of Font addon to use computed style information to handle inherited text styles better.
 
Now both font family and size combo show actual CSS values applied to the selection, regardless of whether the style was explicitly overriden or not.

Download Add to my editor
computedfont

22,429 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.2

Download• Release notes

  • Fixed a regression with missing font size unit.
  • Remove quotation marks from font family names.

Computed Styles

Modified version of Basic Styles addon to use computed style information to handle inherited text styles better.

Now style buttons like bold/italic/underline correctly reflect actual text formatting applied to an active selection even when it's inherited from a style preset (i.e. 'Heading' or 'Subtitle') and can be used to override its effect.

Screenshots

carousel
Download Add to my editor
computedstyles

24,057 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 1.0.1

Download• Release notes

Added a content filtering rule for convenience.
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check