I am using a Drupal theme with font awesome. I can only assume something changed because if I use an icons with the format of (fa-""-"") it will not show or shows the unicode depending on the browser.
example: the code would look like this and would work fine- icon="fa fa-truck"
if you use icon="fa fa-pie-chart" it will not show.
I do not know the terminology to explain a two word or three word icon would be called. It also works if there is a four letter icon like "fa-file-text-o"
Here is a sample page in question http://valve.park3d.com/content/11delete is there a way to fix this? I would be happy to know the terminology of what to look for.
I had a similar issue, my issue was resolved by removing a bootstrap cdn file from header. Such as:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Or any other bootstrap cdn file you may have if you are using one.
But please note you will have to then have the actual file which you can download here:
http://getbootstrap.com/getting-started/
This answer is assuming you are using bootstrap as a front end framework.
In addition you may want to double check you have the CSS file for Font Awesome Icons.
Related
My main problem is that I get a default a bootsrrap design, and i can't change it.
I 've read many places that I have to do something like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
I 've figured out that i need to use this:
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
but with this method I can't change any of my elements. Nobody writes it down, what does the bootstrap.min.css contains. Is it a standard library, or I have to put into it some data. Sorry for the dumb question...
Do not modify the bootstrap.css!
the approach you mentioned first is the right approach.
You're using the right method. Run bootstrap then run your custom code afterwards to overwrite bootstrap styles.
In terms of knowing what you are overwriting, all the documentation for the bootstrap CSS is contained here:
http://getbootstrap.com/css/
Alternatively you can look at the non-minified version, or inspect elements in the browser.
Definitely do not modify the bootstrap library. This will make it difficult to get general bootstrap help as you have a customised version, and you'll never be able to upgrade the library without removing your changes.
As a general rule, never modify a third party library which you are using.
Do not modify default bootstrap.css bcoz it contains much css which will used in coding and designing, rather write or overwrite with your own custom css new a new file
you are using correct method. some times css not override. so use !important to force override.
eg: https://css-tricks.com/when-using-important-is-the-right-choice/
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
First of all, I'm sorry for my poor English. English is not my first language.
I almost finish rails tutorial in codecademy. Portfolio is the last project of this tutorial. I can't use bootstrap in this project. Here is the task.
Set up the layout file (app/views/layouts/application.html.erb). The layout file lets you build a base view that contains all the common elements of your site, such as CSS files, the header, and the footer. The <%= yield %> defines the portion of the layout that child templates can fill in.
In the below the , add CSS for the Roboto web font. Follow the instructions here. Choose the styles Thin 100, Light 300, Medium 500, and Bold 700.
Add CSS for Bootstrap. Follow the instructions here. Use the latest compiled and minified CSS, and not the optional theme.
Make sure both CSS URLs start with https.
This is the link of css for bootstrap.
http://getbootstrap.com/getting-started/#download-cdn
I just tried to insert link tag in the page,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
But I failed. I think I have to do something more. Would you please tell me how to do it? Thanks advanced.
I think you want to add a css file into your app's header
you need use the following codes
stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
you can read more here : http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/stylesheet_link_tag
I have a site currently styled with custom CSS files, all of which I am happy with.
Now I want to add the boostrap stuff, as there is plenty there I'd like to incorporate, most notably a datepicker and a modal dialog.
However I find that when I do add the default bootstrap CSS (.min and an extra file for the datepicker), the fonts of my custom CSS are overwritten.
Is there a way of 'choosing' (for want of a better phrase) which file wins?
I guess the answer is going to be either edit the bootstrap CSS or try and pick and choose what you want rather than just grabbing the default min files, I guess I'm trying to avoid having to do that.
Some Bootsrap default variables are overridable by passing your values to them, you can see it here:
http://twitter.github.com/bootstrap/customize.html#variables
Make sure you override them after importing bootstrap and you should be fine.
You will need to rearrange your css files in the following way :
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<link href="/css/yourstylesheet.css" rel="stylesheet">
I am using twitter bootstrap and i need to change the basic visuals of the framework like the form element etc. Is it a good practice to over write all the styles again in styles.css or modify the bootstrap.css and change the styles directly.
Is there any tutorial which teaches how to set up LESS for Bootstrap and use it ?
See Twitter Bootstrap Customization Best Practices regarding customization and LESS with Twitter Bootstrap.
In general, I wouldn't recommend directly modifying your bootstrap.css file, because it will make it difficult to edit in the future if/when the core css is updated by the bootstrap folks. Instead, just have a second style sheet that is referenced after the bootstrap css. Add your overrides/modifications there, like so:
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen"/>
<link rel="stylesheet" href="css/my_styles.css" media="screen"/>
Of course, for performance, consider combining these and serving them as one to reduce your http requests.
You can do this in Step 3 on the Boostrap Customization page...
http://twitter.github.com/bootstrap/customize.html
You can do depend up on your requirement. If you want to change all the form value in your website, you can modify the bootstrap file. else you can create one more file called style.css and write the css code using specific some classes.
This the tutorial may be helpfull to you
Link1,Link2