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
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
Foundation Sites has CSS classes for a grid system. Instead of using these classes. the Cornerstone developers seem to use some SASS function called grid-column. I will occasionally need the default Foundation grid system when inserting content from the content manager. What I've tried so far is going into the theme.scss file in the assets folder and doing an import into the node modules folder where foundation/grid is kept. That didn't work.
I don't think importing the grid only would work... the proper way to go should be:
Including the whole Framework.
As you only need the grid, edit the _setings.scss from the framework, disabling everything except for the grid (and please make sure you have the grid you want on settings, because default grid changed since 6.4).
Including the new stripped down foundation into your project.
Hope this helps
I would like some clarification on what bootstrap-extend.css is. I have seen on many sites and even a template that I had purchased includes however I am unsure of its purpose. The file contains more CSS. Is it a personalized version of bootstrap ontop of the already included bootstrap file?
I'm a beginner coder and am trying to integrate my css into my app. Using Rails 4 + Bootstrap 3.
I wrote out the html + css for the front-end of my app prior and it all worked fabulously. I moved everything to my folder and edited my V + C accordingly.
I have installed the bootstrap-sass gem successfully. Have updated my assets application and js. I have a .scss file importing bootstrap and my Google fonts.
Bootstrap, Bootstrap js, and Google fonts are working selectively/randomly on certain pages, but not fully on a page or they just don't work at all or they are there but all messed up now. (ex. modal not working on one page, but js element on another page works) I am trying to call the css files from where they are locally stored.
My questions:
1. Is there something I would need to edit to integrate the two in addition to the above?
2. Do I have to transition my css into another file?
3. If there is no easy way to fix this, should I just start over with my css?
Would appreciate any tips. Thanks!
A good starting point would be to check your sources under the inspector, to make the that the css and javascript are both being required. Also check the console for whether there are any javascript errors.
Assuming you are on google chrome, and on a mac, that would be cmd+alt+i, and ctrl+alt+i on windows.
You can also check which files are being included through checking page source by right clicking most parts of the page.
If they are being required and styles are not being applied then something else is probably getting in the way( i.e. bootstrap javascript files are being required twice, css is being overwritten because of load order, etc)
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.