1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XenIco 0.2

Icon Font For XenForo Editor

  1. ibnesayeed
    XenIco

    XenIco is an icon font to use as a replacement to CSS sprite used in the (Redactor based) editor toolbar. To use it for the editor toolbar icons, generated markup needs to be modified. One way is to include data-* attribute to map buttons to corresponding CSS classes and allow CSS to insert content. Otherwise use inline characters in the anchor tag like "b" for bold and "i" for italic. (This may require some edits in the Redactor button template/generator function.) Mapping of the icons to their respective characters can be found in the "index.html" file included in the package.

    Package includes bulletproof font embedding CSS rules along with four variations of the font in SVG, WOFF, TTF, and EOT. It also includes raw/dev version of font file to extend.

    Pros
    • Lightweight markup and less CSS.
    • Changing the the size and color of the icons is as simple as styling text using CSS.
    • High resolution screen ready (retina display ready, if you prefer to call it this way).
    • Font file can be cached as it is the case for CSS sprite (PNG image).

    Cons
    • Icons will be mono-colored. One cannot have a single icon with multiple colors in it. Although different icons can be styled in different colors.

    Extend

    Currently this font only contains 22 icons used in the editor toolbar but one can easily add more icons to the font and extend it. I have used IcoMoon App to generate this font. Read the "Read Me.txt" file in the package to find out how to extend this font. This application will allow you to import static images in various formats and CSS sprite in a color of your own choice.

    IcoMoon hosts 3800+ free and open source vector icons to chose from. It provides in-browser minimal vector edit options and option to import your own custom vector graphics. The IconMoon App itself is open source and hosted on GitHub, so feel free to run it locally without hitting any hosted service.

    Example

    Please find "toolbar.html" file to see some example usage. Here is how it looks like.

    XenForoEditorToolbar.png

    Icons

    Following is the list of icons added in the font. You may also find this in "index.html" file.
    • x => Remove Formatting
    • b => Bold
    • i => Italic
    • u => Underline
    • s => Strike-through
    • c => Text color
    • h => Font Size
    • f => Font Family
    • ) => Smiles
    • a => Alignment
    • . => Unordered list
    • # => Ordered list
    • - => Outdent
    • + => Indent
    • l => Link
    • p => Image
    • v => Media
    • { => Code
    • q => Quote
    • < => Undo
    • > => Redo
    • [ => BB Code

    XenIco-01.png

    License

    I have used two free icon libraries included in the IcoMoon App to generate this font. Both the libraries are released under Creative Commons by 3.0. Please see the "license.txt" file for more details.