angularjs - TextAngular 的 Font-Awesome 替代品

Question

我正在使用 TextAngular Editor，但无法弄清楚 font-awesome 是如何打包的！我不想使用 font-awesome，因为我有另一个自定义字体 css。

谁能告诉我在哪里编辑它，以便我可以调用我的 custom-font.css 文件并做出必要的安排？

我调用我的图标使用

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

而不是

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

Answer 1

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

1 - fork/branch 用于 textangular 的存储库并对此文件进行更改

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

如果您进行搜索，您将在那里看到您要更改的 html，（搜索“fa-”，据我所知，图标的所有 html 都在那里。您只需将 fa 代码替换为您自己的代码，就像你在你的问题中的例子icon icon-bold

它们在 下iconClass，因此从源代码中随机抽取一个，您将更改该部分，请参见此处：

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

2 - （这是假设您不必在项目的其他任何地方使用 font awesome）更改您的自定义图标以使用 fa- 代码。所以你基本上会用你自己的，用你的 custom-font.css “覆盖” fa-call，所以你icon icon-bold必须更改为fa fa-bold. 但同样——只有当你在这个项目中根本没有使用 font-awesome 时。

Answer 2

您可以将其放入您的 Angular 应用程序的配置中并更改内容（其中包括图标），如下所示：

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

}