I am creating HTML template which has these icons:
<i class="ti-user"></i>
<i class="ti-facebook"></i>
<i class="ti-twitter"></i>
although I included themify and fontawesome on the template, no icons are showing.
what should I do, please?
and many thanks in advance.
For font awesome - It could be a CDN issue. Try getting a CDN from cloudflare. It resolved the issue for me.
For themify - you need to open the "themify-icons.css" and update the folder path for the fonts directory. If the relative path changes, then it needs to be updated in the css file as well.
src:url('../fonts/themify.eot?-fvbane');
src:url('../fonts/themify.eot?#iefix-fvbane') format('embedded-opentype'),
url('../fonts/themify.woff?-fvbane') format('woff'),
url('../fonts/themify.ttf?-fvbane') format('truetype'),
url('../fonts/themify.svg?-fvbane#themify') format('svg');
Related
I have linked the minified CSS of Font Awesome from Bootstrap CDN in a webpage. The problem is that the icons appear later than the rest of the page content after a visible delay.
What is the best way to get rid of this delay? (FYI, I have already included this CSS file above every other CSS and JS link in the head.)
The minified css would not make much of a difference in load time. That font awesome css file references the paths to external font files that will load in after the page loads. You can see the delay on font awesome's website: https://fortawesome.github.io/Font-Awesome/icons/
#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;
}
You could base64 encode the fonts and include them right in your site's css. This would substantially increase your site's css load time, but it would get rid of the flash. Although it might not work in all browsers and I would not recommend it.
You could try hosting the font awesome css and fonts directly on your server. The CDN might be the cause of the latency.
I resolved the issue by self hosting the icons, this is described at https://fontawesome.com/docs/web/setup/host-yourself/webfonts
Try to change url() to data-uri()
LESS:
data-uri('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
http://lesscss.org/functions/#misc-functions-data-uri
Hi guys I've done a fair amount of digging and this persistent problem is driving me insane.
I can't get my font-type to load for mobile and IE.
My site is http://kays.vurb.us/
I am talking about the hamburger icon when in responsive mode. It uses the letter 'a' with a special font 'etmodules'.
This is how my css looks like:
#font-face {
font-family: 'etmodules';
src: url('etmodules_v2_4.eot');
src: url('etmodules_v2_4.eot?#iefix') format('embedded-opentype'),
url('etmodules_v2_4.woff2') format('woff2'),
url('etmodules_v2_4.woff') format('woff'),
url('etmodules_v2_4.ttf') format('truetype'),
url('etmodules_v2_4.svg#etmodules_v2_4regular') format('svg');
font-weight: normal;
font-style: normal;
}
I put the files in my main wordpress directory. I don't know what I am doing wrong. Since it doesn't work on IE and mobile I tried looking at the IE developer tools but I can't figure out why the font won'
t download or load on the site. Please help me :(
Create a new folder called fonts or any name you want inside your theme folder, then upload your font files inside that folder
Then use absolute path e.g
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
My client has IE8 or IE11 with a lot of security configuration. They have the font download option disabled and that makes the bootstrap icons to not show up. Is there anyway to make them appear?
The bootstrap icons are imported via CSS like this:
#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.woff2) format('woff2'),
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')}
Instead you can use a URI Generator to convert the files into a data string value.
This will allow you to use the font icons without having to import the files
I am attempting to use the following webfont kit from Font Squirrel on a webpage - http://www.fontsquirrel.com/fonts/DJ-Gross
On the 'Webfont kit' tab on the above page, I selected 'No subsetting' form the dropdown and then clicked 'DOWNLOAD #FONT_FACE KIT'
I think font squirrel does a great job of setting out the #font-face declaration for you so I have just used this in my css and moved the font files (.eot, .svg, .ttf, and .woff) to an appropriate directory to use on my site where fairly sure filepaths are referenced correctly.
This font is rendering in Safari but not Chrome
Disregarding my webpage, this can be reproduced by opening the DJGROSS.html file that comes with the Font Squirrel download. Again, this demo works in Safari but not Chrome and I have not touched this code at all :)
EDIT:
#font-face {
font-family: 'dj_grossnormal';
src: url('DJGROSS-webfont.eot');
src: url('DJGROSS-webfont.eot?#iefix') format('embedded-opentype'),
url('DJGROSS-webfont.woff') format('woff'),
url('DJGROSS-webfont.ttf') format('truetype'),
url('DJGROSS-webfont.svg#dj_grossnormal') format('svg');
font-weight: normal;
font-style: normal;
}
All the font files are in the same directory as my style.css file where this #font-face declaration is
is working... look this image try to clean you Google Chrome!
If you open the dev console and see what files the browser is pulling from your site, you'll be able to see if it's downloading the font file in safari. Some more information like this will help us to answer your question.
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