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...
Related
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've been banging my head against the wall for a good hour with this stupid problem.
I'm building a website and I'm using Font Awesome. The home page of the site is located in the root (/); a page called fog.html is in /content/books/. The Font Awesome folder (font-awesome-4.6.3) is in /fonts/, so that for example FA's fonts are in /fonts/font-awesome-4.6.3/fonts/.
I reference FA's CSS from the home page like this:
<link rel="stylesheet" href="fonts/font-awesome-4.6.3/css/font-awesome.min.css">
and from fog.html like this:
<link rel="stylesheet" href="../../fonts/font-awesome-4.6.3/css/font-awesome.min.css">
because fog.html is two directories deeper than the home. I checked with the inspector and FA's CSS is properly referenced in both instances.
FA's icons are visible on the home page, but I get blank squares on fog.html. I guessed it must be because FA fonts are referenced by FA's CSS using relative paths, and since the two pages are located in different parts of the directory tree, any relative path I type in there will take me to different places depending on the page the CSS is referenced in.
So I decided I'd just use absolute paths in FA's CSS. I'm doing this on my local PC, so the edited CSS looks like this:
/*!
* Font Awesome 4.6.3 by #davegandy - http://fontawesome.io - #fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/#font-face{font-family:'FontAwesome';src:url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.eot?v=4.6.3');src:url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') [etc]
Regardless of all this mess, FA's icons still show on the home page, but they don't on fog.html. Clearly the absolute path can't be okay from one location and not okay from another, and since FA's CSS appears to be referenced properly on fog.html, I haven't got the foggiest clue why this happens.
Any help would be deeply appreciated!
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.
I've been using Font Awesome for a little while now, and was updating to 4.0 today. I decided to use the BootstrapCDN this time, and I've run into problems. The icons aren't being displayed despite using the new class names.
The CSS file is getting pulled down fine, but when I look at developer tools in Chrome the fonts aren't being served. Based on the relative path to the font within the CSS file (src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');), I was able to test the link and download the font:
http://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?v=4.0.0
So the link is correct (of course). Anyone know why the font isn't being served?
You have to do more than just use the new class names. Did you make sure that you added the fa class as well?
updating fonts to existing fonts
I’m already using 5 icomoon fonts in our website which was downloaded from icomoon. I want to include 2 more fonts. What should I do?
Can I add the new 2 fonts to existing fonts?
If yes, How can i add them?
I'm assuming you want to add new "icons" to your existing fonts. The font pack that you download from IcoMoon comes with a "selection.json" file. If you have this file, import it to the IcoMoon app using the Import Icons button. After doing so, you can select more icons to generate a new font.
If you don't have access to this "selection.json" file, you could import your SVG font using the same Import Icons button. The downside in this case is that you may need to add your glyph names again.
Anonther way to save/load previously created fonts is using the project manager: Main Menu > Manage Projects. You may want to download your project so that you can load it back later.
More info: https://icomoon.io/#docs/save-load
at present icomoon does not allow you to import .ttf files. but it can be done using a svg, use services like http://freefontconverter.com/ to convert your .ttf file into an svg, once it is done you can import the svg file it in your current project and add more icons to it.
go to the icomoon site, click on the icomoon app, click on the import button and import the old icomoon.SVG file which is in your code you can see all the icons which are in that file in icomoon site once import is done and also import new SVG or select from already existing icomoon list which you want to add to the existing list, select all(i.e old icons which are already there and new icons which you want to add to the existing list) click on generate font and then download that file, extract it you can see fonts folder copy all the files in that folder and paste it in your code(I mean replace the existing files in your code with this files) and you can see styles.css folder in extracted icomoon zip there you can see newly generated classes, copy those newly generated classes and paste it in your code where other icon classes are present
Not sure if this has been resolved yet as it's an old question but there are a few approaches you can take depending on what you currently have available.
Ideally you will still have the selection.json file from when you first downloaded the first 5 icomoon fonts. If not you might still have the project stored in your browser. If so then you will have the current 5 fonts as is with all the settings and class names the same.
If you are able to get that great then you will only need to add in the code for the two new fonts. To add the two new fonts you can import the entire font file for both to IcoMoon by selecting the svg version of the font. Then add it to your existing font that has the original 5 fonts and you should be good to go.
The key is restoring the original 5 so work doesn't need to be repeated to get everything back to as it was. If you can't do this than it is probably easier to add the 2 new fonts as a new project in icomoon and just condense those 2 fonts into 1 new icon font.
I have some information on the basics of icomoon and importing projects here: http://stephentvedt.com/2014/04/03/using-custom-icon-fonts-icomoon-quickstart/
As an alternative;
If you have an existing TTF (True Type Font), use for example font-converter.net to convert the TTF to SVG. In IcoMoon you can now click "Import" to bring back your icons/characters by importing the SVG file, and add icons as you see fit.
In case you're looking at another font format (under MacOS, TTC for example), then first consider converting it to a TTF (this worked for me: transfonter.org).
Note: I'm in no way affiliated with either websites.
I tried Vaibhav Soni's suggestion first, but that website seems no longer working properly.
Also note that certain fonts are commercial and/or have copyright limitations, so you should not use those fonts in this fashion.
The correct way, You should import all previous module icons and new icons. Then generate fonts and replace the fonts folder and style.css file directory in your code.