I have a single spa application with a root-config, a styleguide, and a couple of react applications. All of these application are generated using the yarn create single-spa command.
I tried creating a kit from the font-awesome website and adding it to the root-config index.ejs inside the head tag.
Then I tried adding <i className='fa-brands fa-facebook-f' /> in one of my MFEs.
The loaded index.html in my browser include the tag code. But it's dimensions are 0x0.
You are missing some styles.
When you generate your kit, the font awesome website shares a snippet of the script tag for your kit.
You need to place it in the head section of your root-config.
But that's not all. You also need to add some font-faces.
The same page (with the snippet) also has a link to download example html file.
If you check that file it has extra style tags.
Once you add those to your root-config, the icons will start showing up.
This issue is not single-spa, it's the confusing documentation for font-awesome.
Related
enter image description here
I am trying to create a website with bootstrap, but wanted to add some css of my own.
I have made a folder and have added my html file, not named index and in the same folder is my css file, and have linked it just after the CDN line of the bootstrap code, but the css file is not working due to some reason, and I can not figure out why.
Edit: So after I put the reference link just below the CDN line of the bootstrap code, of my own custom css. It should be working and my html should get updated, but I do not see the changes. Initially I thought it is because of the different folder, but even after putting it all into the same folder the webpage is not updating.
Try this:
<link href="~/FolderName/Petvrs.css" rel="stylesheet" />
Or drag and drop this css file inside HTML page it's must work.
I am building a site from a jekyll theme. I was able to completely customize the whole site except the yellow icons in the picture. These weren't found in the site files. Nowhere. Inspecting that element just shows a div class. I need to remove these but I can't because I can't find them anywhere.
These icons are actually font. To remove them you will have to remove specific classes from the element. In this case for example if you want to remove Laptop icon, you would remove fa-laptop class from the i element.
You can read more about it on the following link Font awesome - Get started
Can you search for a file called font-awesome.min.css in your project root directory? These icons should be a reference from that file. You can modify the mappings to point to something else.
I have a weird issue. I have a website project that I am currently working and I am am using node sass. While in the IDE, I am using VS Code, everything is fine and the styles are there. If I open the html file outside of the VS Code the css disappears for some reason. The css gets compiled fine and the .css file is there. The link tag points to it just fine, but no styles and no images either. Have I missed something in the setup of my project that would cause these issues when opening the html file externally?
Currently, I am trying to use Codepen Project's environment to build a website and later deploy it. I am using a template that I want to start building from. It has its own HTML pages as well as CSS and JS that is linked. However, when I am working in the project environment I cannot seem to get the CSS to apply to the html code (in other words, the live preview keeps showing naked HTML). I have tried uploading the files into the project's root, tried copying them in newly created css files, and tried using them as external sources (href to an external url in the head tag).
It is really to bad because I feel the Project environment can really offer a lot, though I just can't get it to work.
Thanks in advance, and take care!
LINK TO CODEPEN PROJECT:
https://codepen.io/Thumpertje/project/editor/DxxkqM/
<div class="code">
</div>
I have downloaded the fontawesome icons into a folder and the CSS into another folder. I would like to try them out now but I am currently getting:
"Error 503 Backend is unhealthy, Backend is unhealthy,Guru Meditation: XID: 1379938886 Varnish cache server"
when I go to the Example page on the fontawesome web site.
http://fortawesome.github.io/Font-Awesome/examples/
Can someone give me a very very simple example of how I can use an SVG font icon inside a DIV. Just the simplest would be good as I can then work out how to modify it.
Also I just want the very minimum so can I use the SVG without adding bootstrap.css files?
At http://fontawesome.io/get-started/ there's a "Not using Bootstrap?" section how to use it without Bootstrap.
And here: http://fontawesome.io/examples/ are examples how to use it.
e.g. in a div:
<div><i class="icon-camera-retro"></i></div>
The most current way to use Font Awesome without Bootstrap is to add their "kit code".
Log in or create an account at - http://fontawesome.io/get-started/ to get your kit code. Once you get it - just add it to the <head> section. The kit code looks like this ->
<script src="https://kit.fontawesome.com/**********.js" crossorigin="anonymous"></script>