Everything is in the question. I wonder if there is a easy way to include font-awesome icons/character into a slide deck using marp ? For example using an inline and local marp directive ?
On a more general point of view, is there an easy way to add arrows or things like that in the presentation?
I once managed to get icons included using the following line of code, which needs to be placed after the </style>-tag.
<script src="https://kit.fontawesome.com/8b20b734d0.js" crossorigin="anonymous"></script>
FA-Icons can then be included in your markdown text using :fa-flag: for instance.
However, with the latest version of font awesome and/or marp-cli, this solution stoped working – at least for me, but it might help others.
Related
I want to believe that the best way of using icons in VS code is via the icon fonts extension (tell me if I'm wrong). Before now, I used to download icons in .png format before using them. The problem is that, the whole process of setting-up the extension (found in marketplace and open-vsx) for use doesn't seem to be clear (especially for a newbie like me). Please, I need a step by step explanation on how to go about this.
OR
If there exist a better alternative let me know. Thank you.
in my opinion, if you use an icon with a .png file format, then it will obviously slow down the performance of your website. do you already know about CSS framework that works with icons? I'll give you a few CSS framework references that work on handling the icons you need
https://fontawesome.com/
https://www.glyphicons.com/
https://materialdesignicons.com/
I was wondering whether there is any way to "partially" include an external resource in HTML/CSS.
I got this idea when I tried to include Materialze.css in my project and I already had Bootstrap included. Materiliaze messed up my navigation bar as there were certain classes that shared their name between these two frameworks. The thing is I don't want to give up on any of them so I was curious if there is an actual way to only include one of them when is is needed.
Use the #import to import fonts from the internet to css.
If you want to include scripts and stylesheets from files, use <style src="materialize.css"><style> or <script src="hey.js"></script>
P.s. I hope could answer your question, please explain what partial is in detail, cause i didnt understand what "partial" is? THank you
I've been using Font Awesome for a little bit on some of my projects and I have created a bunch of my own icons that I can link locally without a problem; however, I want to be able to link the icons I made from an online source like Font Awesome do and serve them publicly, how exactly is this achieved?
You need to have icon in SVG format that you have created,
then you can use this, it will generate all the necessary font types, CSS/Sass/Less/Stylus , HTML demo page and Name font according to your wish.
Gruntt Web Font
I did a bit of Googling for you to find somewhere for your to offer your files.
You will need to create a font from your SVG files, I use fontastic.me and it's very good, but you could use another service.
You will then need to create a package of your files, and put it on a CDN service so that other people (or just you) can use it publicly. You can try using something like https://www.jsdelivr.com/ or look into how to set up your own CDN.
I am using Font Awesome. If I use various icons, like the calendar or the speech bubble, they all work.
However this one appears not to work anymore.
If I change it to the calendar or others, they show. When I change it to this one, it fails. Any ideas?
Your library is too old, change version to at least 4.4.
This Problem is due to the updation on font-awesome file.Update your font-awesome .
The sticky note options (fa-sticky-note and fa-sticky-note-o) were added in Font Awesome 4.4. Once you update your Font-Awesome files, those glyphs will properly render for you.
I recently found out about twitter bootstrap and I have been diving deep into the most recent version, Bootstrap 3. On the website, there is an example for an "Off Canvas" template (here: http://getbootstrap.com/examples/offcanvas/ ) which I have been modifying. But there are several things in the example that do not make sense to me.
In the "Off Canvas" template example, there are div elements that reference classes such as "row-offcanvas", "row-offcanvas-right", and "sidebar-offcanvas". I cannot find these in the bootstrap.css, and neither do I see these in the Chrome DevTools. I also do not see any effect when I remove these classes. Do these classes have any purpose? Or was it a mistake in the example to include those seemingly non-existent classes?
As #mgttlinger mentioned the css is defined at offcanvas.css See http://getbootstrap.com/examples/offcanvas/offcanvas.css
If want to a walk through of how it works see http://www.kendoui.com/blogs/teamblog/posts/13-11-05/creating-a-rwd-off-canvas-layout-with-bootstrap-3.aspx. It uses http://getbootstrap.com/examples/offcanvas/ as the starting point and explains the css used to create off canvas.
http://bradfrost.github.io/this-is-responsive/patterns.html#off-canvas is an excellent resource for more background on off canvas and most other responsive design patterns.
If you look at the page source closely you will find that in the header there is
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
These classes are defined in there. And at least for me it does make a clearly visible difference if I remove this.
i did experience the same dunno what i did wrong but js didnt seems to work i just remove all codes and link back all js and css not working. So i try other js on my other folders it work and copy them on my empty offcanvas page it works. Then put back all templates code and it works fine now i guess its my machine some components stop responding maybe just try restart.