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
Related
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.
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
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);
i downloaded a source code for a navigation in web, and in the source code there is this "Typicon"
in the HTML he include this
<link rel="stylesheet" type="text/css" href="css/component.css" />
.
Home
in the component CSS here is this.
#font-face {
font-family: 'typicons';
src:url('../fonts/typicons/typicons.eot');
src:url('../fonts/typicons/typicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/typicons/typicons.ttf') format('truetype'),
url('../fonts/typicons/typicons.woff') format('woff'),
url('../fonts/typicons/typicons.svg#typicons') format('svg');
.
.icon-home::before { content: "\e601" }
I want to change the logo of certain class but I cant seem to find the directory for all the icons in the folder in which I can choose from.
What you need is not the directory where the icons are located. They're on the font files. What you need is the HEX code of the icons you want to use in your classes.
One way (free, by the way) is to upload the .ttf file to either Flaticon or FontSquirrel, so that you can create a CSS file with all the hex codes.
Note that this can also be used to create Webfonts from any FREE font and that the CSS file adds CSS classes for each glyph/icon (so that you can use the CSS class instead of remembering/fetching the icons' codes).
Please excuse my ignorance but my head is starting to spin trying to figure this out.
My wordress website was fine with the google webfont I was using. But then I noticed it looks terribly faded in Internet Explorer. After some googling I discovered one solution could be to use the "kit" instead eg from fontsquirrel (although I don't know if this is true or not). So I got the "webkit" for my font. I uploaded the .eot, .woff, .ttf, and .svg files to a folder titled "fonts" in my child theme folder. I then took the code from the webkit's stylesheet and added "/fonts" to each url line (see below code), and pasted the code into the custom CSS section (my child theme has a custom CSS box beside the universal font section). This does not show my Gruppo font in anywhere, let alone Internet Explorer. Am I following the right steps to make my font look unfaded in Internet Explorer? If so, what am I doing wrong?
#font-face {
font-family: 'grupporegular';
src: url('/fonts/gruppo-regular-webfont.eot');
src: url('/fonts/gruppo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/gruppo-regular-webfont.woff') format('woff'),
url('/fonts/gruppo-regular-webfont.ttf') format('truetype'),
url('/fonts/gruppo-regular-webfont.svg#grupporegular') format('svg');
font-weight: normal;
font-style: normal;
}