At the moment I'm trying to integrate my social media presence on my homepage with jekyll and font awesome icons. However, with clickable FA icons unfortunately these ugly icons for external links (to the right of the respective icon) are inserted. Does anyone have an idea how to avoid this?
You need to look in the /stylesheets or /_compass folders for all the css or scss files and see if you find the culprit. I would suspect something like this:
a[href^="http"]:after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}
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'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.
So my precise problem stems up from the fact that I am unable to make a vector icon for one of my icons. I have that icon as a image file but if I try to convert it using raster vector image it looks horrible. As I can't make it a vector svg file I can't include that as part of the awesome font.
Now my real problem.
The icon gets displayed using a directive
<i class="icon-{variable name}"></i>
This variable portion is changed upon the response from my API. For all other icons it will work. However for obvious reasons for the icon I want it won't find it in awesome font. hence when it encounters "icon-custom" I want the css in the awesome font which generally shows something like
.icon-wap:before {
content: "\f102";
}
to point and load a specific .png file (my icon).
Is this even possible with the css?
I knew there was a way to using variables.less in bootstrap sprites to load custom glyph. but it seems that's not a possibility now.
So is there a way i can do this?
First you need to package your icon into a font file just like how font-awesome did. Your icon need to be in vector format.
Font Custom is a tool to convert SVG images into your own font icon set. It requires a couple packages to install from brew or apt-get (Mac and Linux only right now) and then a gem to watch a directory and build the font.
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>