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>
Related
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.
Actually I am making a website using html, css, and normal javascript. I am trying to use google material components using the CDN way. I have perfectly imported a outlined text input field in my website. But now the problem is I want to change the outline color of the component. but I can't be able to change it from sass by using classname. I have tried a lot to find out a solution but unabled.
Please show me a way how can I change the attributes of the meterial elements.heres my html part...
html code
and here's the output...
output
and link to the website - https://material.io/components/text-fields/web#outlined-text
I just want to make the outlines white.
You should add your css file after cdn link so it can override cdn styles
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href=".style.css">
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 am in the process of creating a portfolio website for a web design course I am taking. I have created a style sheet for my website but I am having trouble getting the changes to show up on my site. All of the changes appear when I view it locally through Chrome, but when I upload my website the changes don't show up. I have checked my code and even tried validator.nu to see if their are any problems but it appears that their are none.
Here are my html and css files:
https://gist.github.com/J-Conley/94255b04292287b58892b75fdc5e35c0
and my website:
http://cook-camel-58438.bitballoon.com/.
If it helps I have a folder called cf_template-1.1.1 and in that folder I have a folders named html, css, and img. Any help would be appreciated.
There are errors in the console, make sure to fix these and try again if it persist.
the image urls behaves differently in localhost and live, make sure to upload those images properly using your website builder whatever it is and not use static urls.
I see you used bootstrap here. When overriding styles make sure you use the exact same selector whatever library did used you are trying to modify i.e. .md-content .md-container .md-input .md-label span you can use inspect element / web developer tools to find this and use the exact same selector to override the default style given by the library, make sure the last thing you import is your custom style sheet.
You made wrong with css file path.
<!-- Custom styles for this template go here -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
Replace With
<!-- Custom styles for this template go here -->
<link rel="stylesheet" type="text/css" href="styles.css">
all your images are not found. Check the path / upload them again and make sure it's right. Maybe try the absolute path;
http://d33wubrfki0l68.cloudfront.net/bundles/adc83b19e793491b1c6ea0fd8b46cd9f32e592fc.js is not a style sheet. Please remove the style tag of it
You should upgrade your Jquery from version 1.11.3 to 3x.
That will help because version 1.11.3 is not compatible with Bootstrap 3.3.5.
Also you should try to press the "disable cache" button in Chrome Dev Tools->Network->Disable Cache. Usually, cache is the culprit of not updating CSS.
On my page, Fontawesome icons (for example the two one of the extreme top right of the page) don't work any more, despite the fact that the vendor CSS is indeed loaded. Here's how it is loaded from my CSS file:
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
Any idea why it's not working?
In http://pizzaontime.fr/new/wp-content/themes/pot/dist/styles/main.css you are including font files for FontAwesome locally. The link relative link starts with ../fonts/, so it should be in here: http://pizzaontime.fr/new/wp-content/themes/pot/dist/fonts/, but there is no FontAwesome font file.
Yes, you are including the *.css file, but you will have to place the font files in the same structure the FontAwesome CDN is organising them.
Edit with more details on how to fix it:
First approach (fastest and easiest way): Include the css file in your HTML (<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">). Remove your include in your CSS file then.
Second approach: Place the missing font files in http://pizzaontime.fr/new/wp-content/themes/pot/dist/fonts/. You can find them here.