Font Awesome not working
badrul1329 opened this issue · 9 comments
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">
Replace all css classes from 'far' to 'fas'
Starting in the line below:
v-markdown-editor/src/editor.vue
Line 206 in 98a26ce
Having a similar issue right now - for me, I got a weird issue where the toolbar buttons look like this:
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.
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:
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;
}