Do I need to recompile LESS to upgrade Font Awesome icons? - css

I'm very confused about LESS and in particular, the Font Awesome local files in a template I'm using.
I apparently have Font Awesome 4.3 and I've just downloaded 4.7. Of the files common to my project and the downloaded zip file, I'v overwritten the fonts and the less folders. Shouldn't that be enough to have my project use the latest icon set? - It's not as the old icons are working, but the new ones are not.
If I'm not recompiling less (do I even have to???), what else would I need to look for to get the new icons working?
EDIT:
In the main css file for the template, I've found some code related to Font Awesome:
#font-face {
font-family: 'FontAwesome';
src: url('dev-plugins/fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('dev-plugins/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('dev-plugins/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('dev-plugins/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('dev-plugins/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('dev-plugins/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
In that same file is reference to the FA icons - example:
.fa-times-circle-o:before {
content: "\f05c";
}
.fa-check-circle-o:before {
content: "\f05d";
}
So am now assuming my whole template needs recompiling?

I've worked it out by doing the following:
access the source files for the template
replace the Font Awesome LESS files with the latest version from their zip download
replace the Font Awesome font files with the latest
with the new files in place, re compile the main CSS LESS file
overwrite the outputted CSS with the one in my project
I'm using using Windows so I used WinLess to compile the LESS file.
So the answer to my question is: yes - I did need to recompile some LESS because the Font Awesome details are embedded (for reasons beyond me) in the main CSS file.

Related

#font-face only working if the font is installed on the local machine

I am trying to use a custom font, which is not available via Google Fonts. I unzipped the font and put it into src/assets/fonts of my React project.
In my index.css I am loading the font like:
#font-face {
font-family: 'LemonMilk';
src: local('LemonMilk'), url(./assets/fonts/LemonMilk.otf) format('otf');
}
I tested the app both on the localhost and hosted it on the web for testing and it is working fine, since the font is installed locally on my machine, but if I open the app on a different machine it is not working. I also deleted the font from my machine and the fallback font started to show since then. What am I missing ? Thank you
It's looking like Your browser has a problem with understanding the font file. Try to make the webfont package from the font file. There is lot of tools to approach it:
https://www.fontsquirrel.com/tools/webfont-generator
Webfont package will contain the font in all major supported formats and will generate the css #font directive for You.
DISCLAIMER: Ensure that You have the rights to use the font.
well i suggest creating a different css file for your fonts then import it to your main css also this site generate font-face for your font with css file!
The correct font name is Lemon/Milk and you'll need to convert it to other format like WOFF WOFF2 as well.
Please Follow this:
Go the this Website free online font generator
Upload your font and check TTF, EOT, WOFF, WOFF2 (See browser support)
Click Convert > Download
Upload the newly converted fonts to your server
Finally your CSS should look like similar to this.
#font-face {
font-family: 'Lemon/Milk';
src: url('LemonMilkbold.eot');
src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
url('LemonMilkbold.woff2') format('woff2'),
url('LemonMilkbold.woff') format('woff'),
url('LemonMilkbold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Please Note that you'll need to convert any other font weight too. and don't forget to add the correct path

Combined CSS file functionality

I'm trying to reduce the http requests on my website by combining multiple CSS files. I'm copying and pasting them in the order they are right now when it all works but when I try using this giant combined CSS file certain icons aren't showing up. The problem seems to be with a font-awesome CSS file, as when I separate that out the icons show up.
I thought that multiple CSS files functioned exactly the same as if you were to combine them in order but this does not seem to be the case for me. I don't know whether maybe it's because the combined CSS file is too big (466 kb) or that I'm combining minified and normal files, I've checked that all the selectors are the exact same but it's not showing the same specific icons.
Is there something about combining CSS files that I'm missing?
Font Awesome makes reference to a fonts directory where the font files are stored. In your combined CSS file you will need to make sure that either the fonts folder is still in the right spot relative to your CSS file or you will need to alter the path to the fonts that font awesome is using.
Below is the snippet Font Awesome uses to reference the fonts. You may need to change the ../fonts/ to ./fonts/ if your stylesheet and fonts folder are in the same directory.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Normally the CSS for font awesome is stored in a CSS folder. So the CSS tries to find fonts in the fonts folder one level higher than the CSS.
You can try with minifier CSS. you have to reduce the weight this way.
check link: CSS minifier

Wordpress and Bootstrap 3 glyphicons

I am in the process of making a custom theme with Wordpress and bootstrap 3. I am using wp nav walker for the menu. I was able to get everything to work accept the glyphicons. Whenever I insert the glyphicons per the helpfile # https://github.com/twittem/wp-bootstrap-navwalker the icons do not show up and a tool tip with the icon name show up instead. I am wondering if I am putting the font folder in the correct place. I currently have it in the root of my theme folder I am currently working on.
Any suggestions?
I'm working on the same kind of project for some months now (https://github.com/bassjobsen/jamedo-bootstrap-start-theme). I Also integrated wp-bootstrap-navwalker. I test the insertion of a glyphicons by setting its name in the title-attribute of the menu-link as describe in the helpfile. I didn't find any problem.
In my code the glyphicon will be add like b.e. <span class="glyphicon glyphicon-bullhorn"></span> So nothing special i thinks so. Default Bootstrap files / including should be enough to show your glyphicon.
Looking in boostrap.css you will find:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
So your folder stucture should look like:
/assets/css/bootstrap.css
/assets/fonts/glyphicons-halflings-regular.eot
/assets/fonts/glyphicons-halflings-regular.ttf
/assets/fonts/glyphicons-halflings-regular.svg
/assets/fonts/glyphicons-halflings-regular.woff
Note in this case /assets/ can be any path.
The fonts folder should contain the glyphicons family in eot, ttf, svg, and woff formats. In my case, I'm using the halflings, regular, and social-regular.
Uploading the fonts folder to the theme folder should work.
wp-content > themes > fonts

Font not rendering properly / font-face not working?

I hope I'm asking this question in the right place,
I'm working on a website for a friend, here's the site hosted on my goDaddy acc:
http://www.andkensol.com/rowanWeb/
And here it is on my friends:
http://www.rowanmoore.org/
You can see the clear difference in the title font. If you inspect them you'll see they are both using CODE. I personally uploaded all the files myself and the file structure, layout, file paths are all identical yet the font won't render on my friends site.
I downloaded the font from font squirrel and I'm using #font face to implement it in both sites.
CSS
#font-face {
font-family: CODE;
src: url('font/CODE Light.otf');
}
#nameTitle{
font-size:60px;
font-family:CODE;
color:white;
font-weight:400;
margin-bottom:-3%;
}
The 'font folder' is in the same folder as the stylesheet and CODE Light.otf is in the font folder.
Ive deleted the site from my friends server, downloaded it from mine and then uploaded it to my friends and still no luck.
Could this be a problem on goDaddy's end perhaps?
I recommend you to use some webgenerator to generate css file with different formats of font.
I think your problem is wrong #font-face.
#font-face {
font-family: 'nfs';
src: url('yourFont.eot');
src: url('yourFont.eot?#iefix') format('embedded-opentype'),
url('yourFont.woff') format('woff'),
url('yourFont.ttf') format('truetype'),
url('yourFont.svg#yourFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Diffrenet browser need other format to render and open font.
I'm using mostly those three webfont generators
http://onlinefontconverter.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://convertfonts.com/
But there is more, type to uncle google "font generator"
EDIT: i think blank space in your font/CODE Light.otf is the problem try to use for example something like this font/CODE_Light.otf
I guess it's a matter of access rights of your folders/files.
Something like 644 would be necessary for a file to be able to access the font from the outside web (the last 4 => read access for public). You can either use chmod on the console or change the rights in your ftp-client.
Also, you should support more than otf, or you will most likely lock out a significant amount of Internet Explorer Users.

CSS Font Face, only download when font is non existent

I've included a custom font on my website (Segoe UI), however the font file are around 1mb, which takes a few seconds to load the first time.
I'm on a Mac, and the font is not shipped with OSX. However, as far as my knowledge goes, it's included with Windows.
How can I make CSS only load the font if it's not already existing on the client?
Using local('Segoe UI') worked out. Seems like it prioritizes the sources from first to last.
Here's the working code
#font-face {
font-family: Segoe;
src: local('Segoe UI'), url('fonts/segoeui.ttf') format('truetype'), url('fonts/segoeui.woff') format('woff');
}

Resources