nasa8x/v-markdown-editor

Font Awesome not working

badrul1329 opened this issue · 9 comments

i have installed this package using npm in vue and configure it . but the icon of the editor options are not showing.its missing.I'm using bootstrap version is 4, Vue 2.5.17 .

image

rulz commented

I have the same problem, any suggestions?

i ave same issue, kindly help

I temporarily placed the font-awesome CDN
<link rel="stylesheet" href="//l.allcdn.org/fa/v5.3.1/css/all.min.css">

@nasa8x must be forgot to import it, or let it just like that to let us import by yourself

<style> @import 'https://l.allcdn.org/fa/v5.3.1/css/all.min.css' </style>

Replace all css classes from 'far' to 'fas'
Starting in the line below:

className: 'far fa-bold',

Having a similar issue right now - for me, I got a weird issue where the toolbar buttons look like this:

image

So not even a "no glyph found in this font" icon appearing. I'm not sure what version of fontawesome this editor is using, I assume FontAwesome 5 based on how it's using the far class, but I have FontAwesome 5 installed and configured right now and am still getting the weird buttons.

Tried installing another fontawesome version, npm install font-awesome, then adding this line at the top of my main.js (I'm using webpack)

import 'font-awesome/css/font-awesome.min.css';

which imports the CSS from that npm module. This results in the buttons looking like this.

image

There's the wonderful "glyph not found" icons! However this npm module seems to be an older FontAwesome version so I don't think the editor is liking it, hence the invalid glyphs. I noticed that, if I replace the far class in some of the buttons with just fa, they load in correctly - indicative that this is, in fact, an older FontAwesome version.

So maybe my issue is I'm using the incorrect version of FontAwesome, or that this editor's in fact using FA 5 but I have that installed incorrectly. I'm using the official FA 5 Vue.js components and have all of the icons loaded in my main.js, so... I'm not sure what's going on.

I use FA Pro:

https://l.allcdn.org/fa/v5.12.2/css/all.min.css

or change button className:

<markdown-editor :buttons="buttons"></markdown-editor>

<script>

    export default {
        data() {
            return {
               

                buttons: {
                    {

                    'bold': {
                        title: 'Bold',
                        className: 'far fa-bold',
                        cmd: 'bold',
                        hotkey: 'Ctrl-B'
                    },

                    'italic': {
                        title: 'Italic',
                        className: "far fa-italic",
                        cmd: 'italic',
                        hotkey: 'Ctrl-I'
                    },

                    "strikethrough": {
                        cmd: "strikethrough",
                        className: "far fa-strikethrough",
                        title: "Strikethrough"
                    },

                    'heading': {
                        title: 'Heading',
                        className: "far fa-heading",
                        cmd: 'heading',
                        hotkey: 'Ctrl-H'
                    },

                    'code': {
                        title: 'Code',
                        className: "far fa-code",
                        cmd: 'code',
                        hotkey: 'Ctrl-X'
                    },
                    'quote': {
                        title: 'Quote',
                        className: "far fa-quote-left",
                        cmd: 'quote',
                        hotkey: 'Ctrl-Q'
                    },
                    'link': {
                        title: 'Link',
                        className: "far fa-link",
                        cmd: 'link',
                        hotkey: 'Ctrl-K'
                    },
                    'image': {
                        title: 'Image',
                        className: "far fa-image",
                        cmd: 'image',
                        hotkey: 'Ctrl-P'
                    },
                    "fullscreen": {
                        cmd: "fullscreen",
                        className: "far fa-arrows-alt no-disable no-mobile",
                        title: "Toggle Fullscreen",
                        hotkey: 'F11',
                        ready: true
                    },
                    "preview": {
                        cmd: "preview",
                        className: "far fa-eye no-disable",
                        title: "Toggle Preview",
                        hotkey: 'Ctrl-P',
                        ready: true
                    },

                    "clipboard": {
                        cmd: "clipboard",
                        className: "far fa-clipboard",
                        title: "Copy & Markdown Format",
                        hotkey: 'Ctrl-V'
                    },

                    "clean": {
                        cmd: "clean",
                        className: "fas fa-remove-format",
                        title: "Clean html format"
                    },

                    "undo": {
                        cmd: "undo",
                        className: "far fa-undo",
                        title: "Undo",
                        hotkey: 'Ctrl-Z'
                    },

                    "redo": {
                        cmd: "redo",
                        className: "far fa-repeat",
                        title: "Redo",
                        hotkey: 'Ctrl-Y'
                    },

                    "bullist": {
                        cmd: "bullist",
                        className: "far fa-list-ul",
                        title: "Generic List",

                    },
                    "numlist": {
                        cmd: "numlist",
                        className: "far fa-list-ol",
                        title: "Numbered List"
                    }

                }
                }
            }
        },     

    }

</script>

i add css to style.scss, it is easy:

.far{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.fa-heading:before {
content: "\f1dc";
}
.btn-outline-secondary{
color: #606266;
}