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.
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.
I started coding my website in one folder and everything works fine. The icons display without a problem. Then I needed to move the code to a different folder and I copy-pasted the exact same files with the exact same code. The icons no longer display in the folder I need. How can I fix this issue?
I'm trying to use Erik Flower's excellent looking weather icons here, but I can't get it to work. I'm using Flask and the folder structure looks like this:
-static
-css
-fonts
-js
I have copied the fonts and css files into their respective folders above. I insert a link to the css files like this:
<link href="{{ url_for('.static', filename='css/weather-icons.min.css') }}" rel="stylesheet" media="screen">
And it appears to work fine, I can go to the css file when I view page source. But when I try to display the icons as described in github page like this:
<i class="wi wi-day-sunny"></i>
I just get a square. I assume it's not finding the fonts where it is expecting them, but the twitter bootstrap fonts are in the same directory and seem to work fine (I can see the glyphicons).
I apologize for what might be a stupid mistake.
Thanks a lot,
Alex
Assuming you didn't change anything in the CSS file, the path to the font file(s) is incorrect.
Bootstrap, by default, expects the Glyphicons font file to be in a "fonts" directory, but the CSS for the weather icons is looking for a "font" directory (notice the missing 's'). Adjust the CSS or copy the fonts to the correct directory.
you need to install the font in your operating system as a usable font...
on windows this means put the "weather icons regular.ttf" file into the fonts folder (you can easily get to it from the control panel).
after that just use the unicode hex codes for what you want to display, and tell the widget to use the font you installed.... the codes and associations for various weather apis are in the "values" folder of the "weather-icons-master" folder, under the weathericons.xml
for python 3.6
from tkinter.font import font
...
weather = Font(family="weather icons regular")
fontsize = 20
...
example = Button(master, text="\uf01e,\uf01e,\u...", command=some_def)
example.configure(font=(weather, fontsize), fg="white", bg="black")
example.pack()
obviously you can adjust your font and widget styling the way you want it to look...
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.
Well I built a page which is working absolutely fine as you can see below:
but when i copy my folder to C:\wamp\www\myFolder and run it through localhost using WAMP Server it look something like this
the problem is that the attached Style Sheets are not working and the Java Script is not working.
see below
where you see the green dots here the images are loaded fine...
where you see the pink dots the images are not loaded
where you see the black dot.. 5 boxes in the red section... they are javascript rollover images well they loaded but are not working.. once mouse over the rollover image is not displayed
on the top right where you see the yellow boxes.. the links and the textbox and the button have css style attached which is not working...
WHATS HAPPENING
Perhaps your assets (css and js) are served incorrectly?
If you view source of you page in Firefox, you will be able to click on css link. Do it and see if it take you to your css. If not, then you have the answer - assets path is wrong.
It looks like the images are in the wrong place.
WAMP by default points to C:\www. If your images in your CSS/HTML are referenced by "/images/example.png", then Apache interprets this request as:
"Look for the file example.png in the folder C:\www\images\"
You need to either add the directory "/myFolder/images/" to the image URL or reference the images relative from the CSS file.
This means if your css file is in your C:\www\myFolder and you have an images folder in C:\www\myFolder then your images inside your css will be declared like this:
url('images/example.png');
Note that the trailing slash has been removed, this means it will be relative from the CSS rather than from the root directory (C:\www)
Hope that helps.
i had my links like
href=".\images\image.png"
just changed them to
href=".\images/image.png"
the server was doing what it was supposed to do...