TextAngular 的 Font-Awesome 替代品

Question

我正在使用 TextAngular 编辑器，但不知道 font-awesome 是如何打包的！！我不想使用 font-awesome，因为我有另一种自定义字体 css.

任何人都可以告诉我在哪里编辑它，以便我可以调用我的自定义-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 -（假设您不必在项目的其他任何地方使用超赞字体）更改您的自定义图标以使用 fa- 代码。因此，您基本上 "overrite" 使用您自己的 fa- 调用，使用您的自定义 font.css，因此您的 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;
            }
        ]);

}

TextAngular 的 Font-Awesome 替代品

Font-Awesome alternative for TextAngular

angularjs

font-awesome

textangular