I am trying to include Zurb Icon Fonts 3 into my Moovweb project. First off, is it supported? Second, what do I have to do to get them to work. I have tried a few different combinations of importing them, but each time it brings up a blank local host page.
Thank you in advance.
One way to do this is to create a fonts folder under the assets/images folder where you would place the foundation fonts.
Then you would include the foundation-icons.scss file in the stylesheets folder, but rename it so it's a partial: _foundation-icons.scss
Edit the references in _foundation-icons.scss so they point to image-url("fonts/foundation-icons.ttf"), etc.
Then you can #import "_foundation-icons.scss"; so the styles get compiled in your main stylesheet.
Related
Good afternoon.
Premise: I’m not a web developer and I have little familiarity with all these new names that emerge as mushrooms from one moment to the next. Then I ask you not to give nothing for granted.
My question is very simple: I want to target bootstrap 4 style only on a specific elements (e.g. a div) of my page: the rest of the page hasn't to be involved with this styles.
I notice that a colleague of mine used LESS on an older bootstrap version but I red that it is not support in Bootrastrap 4.
Any ideas?
Thanks,
Sergio
I think to have found the solution but I'd like know if it is the right way.
Here my steps:
I downloaded Bootstrap 4 files using
npm install bootstrap#4.0.0-alpha.6
from dos prompt inside a local folder
Then I modified bootstrap.scss file placed inside node_modules\bootstrap\scss surrounding all code with a class (e.g. .thisismyclass{...})
I then downloaded Koala from this site
http://koala-app.com/
I added the entire local folder (where the boostrap files are) in the Koala UI.
Automatically it create the .css files near the scss files with the reference to my manually added class.
Now, in my page, I added the refernce to my new css and then I added my main class to the div which must use Bootstrap styles.
It's right?
Thanks,
Sergio
First time using bootstrap. I added "bootstrap":"3.3.7" to my dependencies in my bower.json file and it adds to my wwwroot/lib folder but I know it's supposed to include a fonts folder in the bootstrap directory, but it's not there. I tried downloading the bootstrap.zip file from their website, extracting that file and then adding the fonts folder included in that download to my bootstrap directory, but it still didn't work. I've tried looking in bootstrap.css file for the #font-face for glyphicons but there are none. I am just learning how to implement everything into an ASP.Net Core app so I'm new to these technologies.
I think the #font-face is defined in fontawesome. Also, unless you have at least one html element using the font, it will not be requested. So you need to use the font in a style rule (the #font-face doesn't count).
Therefore, download fontawesome and then add an element to your html and then the font will be requested. An element like this for example:
<span class="glyphicon glyphicon-asterisk"></span>
I am now taking care of a website built on Zurb Foundation, the previous developer made some custom icons (like 15) for that website using the foundation syntax - He took the i tag in all CSS files and renamed the CSS variables like .icons-custom-phone .The foundation-icons.css is added to the page and all the font files are on the server but when i try to name a class="fi-phone" it won't show... as he added a custom.css just after the foundation-icons.css and created custom.svg custom.eot custom.woff etc.
I was wondering how can use the foundation icons in that case since some are really nice
Thanks for your help
So Bootswatch.com has some awesome themes for twitter bootstrap. Unfortunately as soon as I swapped out the CSS scripts for Bootswatch.com the webpage loads super super slow. On my computer when i click preview or double click the .html file.
What is causing this to happen? its not even uploaded to the internet, this is all local. I cant understand why changing the CSS would make a difference. Not to mention the new CSS has fewer lines of code.
I had exactly the same problem.
The issue the the first line of the CSS where it tries to load from google fonts:
#import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
Simply delete or comment out this line so the file starts like this:
* Bootswatch v3.1.0
* Homepage: http://bootswatch.com
* Copyright 2012-2014 Thomas Park
* Licensed under MIT
* Based on Bootstrap
Late to the party but the URL is broken, put "http:" in front of the URL:
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
Did you download any image with the theme?
Maybe the CSS has external references for images.
If you didn't, try to load again your site with your firebug open in 'Network', so you can see whats making the load slow.
Some themes from any source often use code which is easy to customise but may not be the most efficient. Out of the box Bootstrap 2 has a max of 2 css files and 1 JS file (if you go with the combined file)
If I check the source code for the Bootswatch Amelia theme I see an extra 2 CSS files, an extra 2 JS files plus at least 2 Google fonts.
This maybe doesn't explain everything, though it wouldn't help for sure.
Good luck!
If a Bootswatch theme is loading slowly and you find the reason to be the referenced Google fonts, you can try to embed them into your application to make them available offline.
The latest Bootswatch versions (> 3.3.6.1) introduce a SASS variable $web-font-path that you can override and set to an empty value:
// use google fonts api offline
$web-font-path: '';
#import "fonts.yeti.offline";
#import "yeti/variables";
#import "yeti/bootswatch";
To serve the required fonts offline, I used https://google-webfonts-helper.herokuapp.com to generate the fonts.yeti.offline.scss file and to download the required font files. To switch between online and offline mode, you can toggle the first two lines in your code.
I want to set up bootstrap like that Twitter Bootstrap Customization Best Practices
I want though the responsive version. I found this thread Twitter Bootstrap responsive css is not generated form the less files
but it's not clear to me how can I set up bootstrap files so I can customized it using the responsive version ?
If you are wondering how to use less to customise the bootstrap css and then use this in your project, then there are basic approaches.
You can combine your customisation into the base bootstrap css files and import this into your project, or you can leave the bootstrap files untouched, create a second css file for your customisation and import this into your project as well, after the bootstrap css.
Overwrite vs override.
From the first link you give, you can see that both approaches have their supporters.
I've usually used the first method, and this is what I've done.
Download a copy of the less files, here is one source, and add to your project files
Open the bootstrap.less file. You'll see that it orchestrates everything and imports the individual less files
Create theme-variables.less and theme-css.less files and save to this less folder
You need to import these files in the right sequence. Adding the variables file at the end of the Core variables and mixins block with #import "theme-variables.less"; and the theme file at the end of the Base CSS block with #import "theme-css.less"; works for me. Depending on what you are customising, you may need to play with this a bit
That's basically it. Edit your custom files, compile bootstrap.less, and import the resulting bootstrap css file(s) into your project.
Naturally at the start you want to keep good backups incase something goes wrong, and likewise when you upgrade Bootstrap.
Good luck!
First download form https://github.com/twbs/bootstrap less version
How to use Less and less compilers
http://lesscss.org/
http://winless.org/
Bootstrap tutorial
http://www.w3resource.com/twitter-bootstrap/tutorial.php