TextAngular

时间:2015-07-06 19:52:36

标签: angularjs font-awesome textangular

我使用TextAngular编辑器,但无法确定如何打包字体真棒!我不想使用font-awesome,因为我有另一个自定义字体css。

任何人都可以告诉我在哪里编辑它,以便我可以调用我的custom-font.css文件并进行必要的安排吗?

我使用

调用我的图标
    <span class="icon icon-bold"></span> 

而不是

    <i class="fa fa-bold"></i>

2 个答案:

答案 0 :(得分:1)

我会推荐2件事中的一件 -

1 - 对文本库进行fork / branch以获取textangular并对此文件进行更改

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

如果你进行搜索,你会看到你想要在那里改变的html,(搜索&#34; fa - &#34;,图标的所有html就在我所知道的那里。你。只会用您自己的代码替换fa代码,例如您在问icon icon-bold

中的示例

它们位于iconClass之下,因此您可以在源代码中随意删除一部分来更改该部分,请参阅此处:

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

2 - (假设您不必在项目的任何其他位置使用字体真棒)更改自定义图标以使用代码。所以你基本上会覆盖&#34;使用您的custom-font.css进行自己的电话会议,因此您的icon icon-bold必须更改为fa fa-bold。但同样 - 只有你在这个项目中没有使用font-awesome。

答案 1 :(得分:1)

你可以把它放在你的角度应用程序的配置中,并改变这些东西(其中包括图标):

 .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;
            }
        ]);

}