I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.
I downloaded a free css theme and this theme uses css file and font files for icons and unfortunately the theme has no documentation. How can I visually export them to an html file instead of looking at the CSS file line by line?
https://yadi.sk/d/K1fgjd61wWCy8Q
https://yadi.sk/d/j3tjDtwa3Gucng
https://yadi.sk/d/QCi26iPmPE5QIA
https://yadi.sk/d/POI-p5eOsmQArQ
https://yadi.sk/d/tKJY9lGomWsqmg
It was obviously created through icomoon, but I want to see visually which icons are there.
Just to clarify, you wanted to have a preview of the icons, right? That's why you're asking to convert it to HTML to easily view in the browser. If so, I hope this would do:
With the use of your .SVG file (https://yadi.sk/d/tKJY9lGomWsqmg), you can upload this to https://icomoon.io/. There, you can have a preview of the available icons with their corresponding names.
IcoMoon App has a feature of converting .SVG to icons. And with that, it also offers to have a preview of the icons with their names.
I tried opening the .SVG on itself, but (I'm not an expert here) I didn't get to have a preview of the icons.
I hope that helps.
I need font-awesome to have spinner icons.
I could include the whole font-awesome library. But wouldn't that be an overkill for just one icon? Is there a way to include just one icon or component? The problem seems to be, that the library is not modularised to different files. For example, if using scss, all icons are in _icons.scss file, rather than each icon in their own file. If you use pure css, then everything is in one file.
You can't. A font is a single file, much like an image or a document. It doesn't matter how you include it in your CSS -- users will still download the whole font file. The CSS definitions just make the font available on your web site.
There are some things that you could do as an alternative. There are some companies that will allow you to generate partial font sets using custom applications (like https://icomoon.io/, for example). That might suit your needs. But, once you create a custom version of their fonts it's still a file that you can't break up. Still, a custom version of icomoon can be very small and streamlined and would likely fit the scenario you describe.
Another alternative would be to not host the font yourself but use cloud-based fonts that are more likely to be cached by your users. It's not a solution per se but would increase the chances somewhat that your users wouldn't have to download the fonts specifically for your site.
Font awesome v5 supports partial styles, in the getting-started page (https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use), you could include this essential file first:
<link href=/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
and then, you could include one or some of those:
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/regular.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
Very old question, but now you can use their JS API, which will load only selected SVG files. This incredibly lowers the bundle size.
npm install #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icon
and then
import { library, dom } from '#fortawesome/fontawesome-svg-core'
import { faCamera } from '#fortawesome/free-solid-svg-icons'
library.add(faCamera)
dom.watch()
<i class="fa-solid fa-camera"></i>
Two years on after this question was asked, I would suggest you use SVGs rather than an icon font. You can concatenate all your SVGs into an SVG spritesheet, so they all get loaded (and cached) using a single HTTP request. The file will be much smaller than an entire icon font, which was your requirement.
Here are some reasons to pick SVGs over icon fonts (also see here):
You're including only the icons that you want, obviously.
SVG icons allow you to create multicolored icons.
Icons fonts are anti-aliased by the browser. SVGs are not, so they look sharper.
Font icons can be hard to position. SVGs are easy.
SVG icons can have baked-in titles and descriptions, which is good for accessibility.
To get high performance, you'll need to place all your SVG icons in a sprite sheet. You can do this using svgstore (grunt and gulp and webpack versions are available) so that it's part of your build process.
FontAwesome makes all its icons available as SVG files, so you can pick the ones you want and add them to your spritesheet build.
Yes You can, try this Optimize Font Awesome To Ridiculously Low Size Of 10KB!
This is an old question. However, there is a workaround.
I will assume that you are using npm and webpack. (in my case I use Laravel, which includes npm)
Open the folder node_modules/#fortawesome/fontawesome-free/js. Now say you want to use the facebook icon only in the brands.js.
copy brands.js and past it with another name -say 'brands_used.js'- in the same folder
open brands_used.js and comment the var icons = {...}; section, keep it for reference latter
type in a new variable with the icons you want included only, which will be a copy/past from the commented section.
var icons = {
"facebook-f":[...],
};
require the newly created files in your js assets folder
compile your assets
Icomoon lets you use their standalone svgs.
https://github.com/Keyamoon/IcoMoon-Free/tree/master/SVG
I have an old website, and I would like to add a glyphicons to a page of this site.
I cannot install bootstrap (link bootstrap.js and bootstrap.css to this page) because it will change all styled elements on the page.
Is there a way to add only "glyphicons functionality"?
You can build your bootstrap to components, which you need, on
http://getbootstrap.com/customize/
For example for only glyphicon, you can check only glyphicon checkbox and download.
Direct url for this setting is
http://getbootstrap.com/customize/?id=428c81f3f639eb0564a5
Scroll down and download it.
You download only two folders with css for glyphicon (bootstrap.min.css) and fonts files (in all only 170 Kb).
I prefer to use something called 'font-awsome' it has a huge library of icons and it only takes one line of code to include it into any project. - It works the same way as glyphicon being able to format with CSS etc.
I know this is not a answer to your question, but its a valid work around, and I prefer the font-awesome icons.
http://fortawesome.github.io/Font-Awesome/
View here how to include it on your website:
http://fortawesome.github.io/Font-Awesome/get-started/
Have Fun!
You can download glyphicons png on http://glyphicons.com/
I downloaded a customized bootstrap CSS framework from this link
http://twitter.github.com/bootstrap/customize.html.
And I got only bootstrap.css and bootstrap.min.css files.
But as I am using responsive feature, I also need the customised version of bootstrap.responsive.css. How do I make the bootstrap.responsive.css work according to my new bootstrap.css.
PS: I have made 15 span columns and given new width for each.
Thank you.
Its all included in the single CSS file