1

I'm using TextAngular Editor but couldn't figure how font-awesome is packaged!! I don't want to use font-awesome as I have another custom font css.

Can anyone tell me where to edit it so I can call my custom-font.css file instead and make the necessary arrangements?

I call my icons using 

    <span class="icon icon-bold"></span>

instead of the 

    <i class="fa fa-bold"></i>
user3362364
  • 441
  • 11
  • 25

2 Answers2

1

I would recommend 1 of 2 things -

1 - Fork/branch the repository for textangular and make changes to this file

https://github.com/fraywing/textAngular/blob/master/src/textAngularSetup.js

if you do a search you will see the html you are looking to change there, (search for "fa-" , all the html for the icons is there as far as I can tell. You would just replace the fa code with your own, like the example you have in your question with icon icon-bold

They are under the iconClass, so pulling a random one out of the source code you would change that part, see here :

taRegisterTool('insertImage', {
    iconclass: 'fa fa-picture-o',  <<< change this to what you want

2 - (this is assuming you don't have to use font awesome anywhere else on your project) Change your custom icons to use the fa- code. So you would essentially "overrite" the fa- calls with your own, with your custom-font.css, so your icon icon-bold would have to be changed to fa fa-bold . But again - only if you aren't using font-awesome at all on this project.

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
  • And then i'm assuming, i would have to compile the textAngularSetup.js into textAngular.min.js once done? Thank you :) – user3362364 Jul 07 '15 at 00:47
  • @user3362364 yes they probably have a build process if you pull their repo and install grunt/gulp or npm or whatever they use – ajmajmajma Jul 07 '15 at 13:01
1

You can put it in a config of your angular app and change stuff (among them icons) like this:

 .config("$provide",function($provide) {
    // this demonstrates how to register a new tool and add it to the default toolbar
    $provide.decorator('taOptions',
        [
            '$delegate', function(taOptions) {
                // $delegate is the taOptions we are decorating
                // here we override the default toolbars and classes specified in taOptions.
                taOptions.forceTextAngularSanitize =
                    true; // set false to allow the textAngular-sanitize provider to be replaced
                taOptions.keyMappings =
                    []; // allow customizable keyMappings for specialized key boards or languages
                taOptions.toolbar = [
                    ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'quote'],
                    ['bold', 'italics', 'underline', 'ul', 'ol', 'redo', 'undo', 'clear'],
                    ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                    ['html', 'insertImage', 'insertLink']
                ];
                taOptions.classes = {
                    focussed: 'focussed',
                    toolbar: 'md-toolbar',
                    toolbarGroup: 'span',
                    toolbarButton: 'md-button md-raised hh-small-button',
                    toolbarButtonActive: 'active',
                    disabled: 'disabled',
                    textEditor: 'form-control',
                    htmlEditor: 'form-control'
                };
                return taOptions; // whatever you return will be the taOptions
            }
        ]);
    // this demonstrates changing the classes of the icons for the tools for font-awesome v3.x
    $provide.decorator('taTools',
        [
            '$delegate', function(taTools) {
                taTools.bold.iconclass = 'material-icons';
                taTools.italics.iconclass = 'icon-italic';
                taTools.underline.iconclass = 'icon-underline';
                taTools.ul.iconclass = 'icon-list-ul';
                taTools.ol.iconclass = 'icon-list-ol';
                taTools.undo.iconclass = 'icon-undo';
                taTools.redo.iconclass = 'icon-repeat';
                taTools.justifyLeft.iconclass = 'icon-align-left';
                taTools.justifyRight.iconclass = 'icon-align-right';
                taTools.justifyCenter.iconclass = 'icon-align-center';
                taTools.clear.iconclass = 'icon-ban-circle';
                taTools.insertLink.iconclass = 'icon-link';
                taTools.insertImage.iconclass = 'icon-picture';
                // there is no quote icon in old font-awesome so we change to text as follows
                delete taTools.quote.iconclass;
                taTools.quote.buttontext = 'quote';
                return taTools;
            }
        ]);

}
avilao
  • 193
  • 9