nasa8x/v-markdown-editor

Icons of the toolbar not show.

oriolrg opened this issue · 8 comments

I implement you markdown-editor in my project, but the icons of de toolbar not show.
Only show btn-outline-secondary

Even after implementing fontawesome cdn, still having issues with toolbar alignment not being as shown in demo

2020-05-28 18_13_06-test1

Please import css
import 'v-markdown-editor/dist/v-markdown-editor.css';

or use cdn

https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.css

I already had 'v-markdown-editor/dist/v-markdown-editor.css' imported in main.js of my vuejs project but the icon alignment and style are still the same as the image above. This was testing in a bare bones vuejs project.

2020-05-29 04_47_02-main js - test - Visual Studio Code
2020-05-29 04_48_18-App vue - test - Visual Studio Code
2020-05-29 04_48_45-● index html - test - Visual Studio Code

Is there a way to use FontAwsome icons using vue-fontawesome component instead of using a CDN ?

I imported icons the documented way, but still icons are not loading:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fab, fas)
// Vue.component(FontAwesomeIcon.name, FontAwesomeIcon)
Vue.component('font-awesome-icon', FontAwesomeIcon)

thanks

I stumbled exactly to this problem. the setup instructions lack completely mentioning that fontawesome fonts must be loaded.

first, it shows tiny pixels, but if only adding fontawesome css to page, the icons appear but they are misplaced like on the screenshot of the third comment:

needs to import morioh.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/morioh/dist/css/morioh.min.css">

How to know which are the list of supported icons for toolbars