I have installed Bootstrap icon like this link: https://icons.getbootstrap.com/#install
This is how I import the link and create the CSS file for Bootstrap Icon:
But then it still doesn't work. I still can't use the icon:
Did I do something wrong? Hope someone can explain this to me clearly because I am new to ASP.NET Core 6 and am still learning.
Thank you very much.
Here is a working demo:
Try to add the css into Views/Shared/_Layout.cshtml,or you can add it into the view you want to use the icons:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
And then use the icons like this:
<i class="bi bi-train-front-fill"></i>
Then the result will be:
If you want a local Bootstrap Icon installation. Are the SVG files also available locally?
The Bootstrap icons are based on SVG files see link
https://getbootstrap.com/docs/5.2/extend/icons/#bootstrap-icons
"...While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support..."
Therefore, the SVG files (over 1900) must be in the appropriate directory.
These can be downloaded via the ZIP file link
https://github.com/twbs/icons/releases/tag/v1.10.2
Related
I am trying to find an answer several days but not able to.
How can I add custom styles just like in Ckeditor 4 (For example, using CKEDITOR.stylesSet.add) ?
Thanks
Edit the CkEditor css file in its entirety, that can be found at This guide
From the page:
By default, content styles are loaded by the editor JavaScript which makes them only present
when users edit their content and this, in turn, usually takes place in the back–end of an application. If you want to use the same styles in the front–end, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.
To avoid unnecessary dependencies in your front–end, use a stylesheet with a complete list of CKEditor 5 content styles used by all editor features. There are two ways to obtain it:
By taking it directly from this guide and saving it as a static resource in your application (e.g. content-styles.css) (recommended).
By generating it using a dedicated script. Learn more in the Development environment guide.
Load the content-styles.css file in your application by adding the following code to the template:
I'm trying to create a link on my vue app to local pdf files. Right now here's my problem.
My pdfs are located in assets/static/ and presently linking to them like this.
<template>
<div id="forms" class="view-wrapper">
<h3>Downloadable Forms</h3>
Claim Form
</div>
</template>
This brings up a link on the page, but when I click it, I'm taken to a blank page on my app with just the navbar and footer and nothing in between. I'm hoping to have it bring up the document in the browsers pdf viewer in another tab. Some help would be greatly appreciated.
Edit: SOLVED: #dan helped me realize that I just had to use one dot to access my assets folder.
To render a pdf in the browser use an <iframe src="path-to-pdf" />. Unless you're binding reactive data to the element you don't have to do anything different in vue. Check out https://stackoverflow.com/a/52644970/6890774 this is a similar issue.
Title says it all. I'm developing a Vue app that is going to be used as a display for my instance of Home Assistant. I tell it what JS file to load and what tag to use and HA puts it inside an iframe. The font I'm using is an otf file.
It seems like my component can only use the font when it gets included in the page's section. Since I'm not generating the page or the iframe, I can't add anything to the head. The only thing I can figure out to do is use JS to add the font face to the head after the page is loaded. I've seen a react component do this. Is there a build option or something?
But it is my understanding the whole point of web components is to be able to include a single JS file then use the component. Does this not include fonts or other resources?
I can't seem to get the font awesome icons to load properly. The page in question can be found here: http://thelink.biz/AboutUs/
Am I loading the font awesome correctly or is there a conflict with Bootstrap?
You have the correct styling (line-height: 30px in stylesheet.css applying to the icons using .social-links > li a), but the order that you are loading the stylesheets in the page means that it is getting overridden by the default font awesome style. Make sure that you load stylesheet.css after the font awesome css files in your header.
I can see that you placed google analytics code wrogly at the top of the html file. Please place the code at the bottom of the html file & of course inside body tags.
Your <a> tags need some padding to push down the FontAwesome icons.
I was able to add
padding-top:7px
to the <a> and it fixed the centering of the icons.
JsFiddle is my laboratory but everything is at a halt at the moment because I cant get font-awesome to work in it. I tried using the space provided for external links but to no avail. I even added the link directly and it still didn't work.
I'm in the middle of an experiment and I'm not able to get it working. What is the correct way to add font-awesome to JsFiddle?
Just paste the href part of the CDN link
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
to External Resourses (on the left hand side panel) and click the plus sign.
See this jsFiddle for example.
Check this JSFIDDLE out. It is using an cdn URL in the CSS area.
#font-face{
font-family:FontAwesome;
src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix)
Import this script:
<script src="https://use.fontawesome.com/c3ef28c600.js"></script>
or
<script src="https://use.fontawesome.com/f83feeae10.js" ></script>
DEMO
Font Awesome 5
https://use.fontawesome.com/releases/v5.3.1/css/all.css
On the left sidebar of JSFiddle click Resources to open an input field.
Paste the above link into it.
Click the X button to add it to your fiddle.
For current versions and other options (free/pro versions etc) visit their info page on how to Use Font Awesome's Free CDN