You need to add the icon class along with fa, fa is basically main class and mandatory for icons so do not forget to add this class.
I find this is most apparent in text-warning, since it is an ugly yellow as opposed to a very visible orangeFor Bootstrap, This is probably the best answer on this page, at least for me, since I'm already using Bootstrap and this fits in with that paradigm. Because font awesome is a font it responds to styles and classes that affect text. You simply avoid this by giving each font-awesome class you want to style uniformly the same class say:Then in your css you can the style the fonts using the same css rules you would style a normal font with. .fa-plus-square-o. The problem is that when I put the two lines below in my code, the commenting icon and the user add icon can't be displayed:By the way, you can have a look at the two links below to have an idea about what the commenting icon and the user add icon that I'm trying to display are :the times circle icon and the exclamation triangle icon show on my computer screen without any problem. SHARE. None of the answers here demonstrate any of those things, and to try and enforce best practices be followed in the context of an isolated answer is elitist IMO. inherited using CSS.Font Awesome also works great with all the Bootstrap components.If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: The Also note that if you change the font-size or color of the icon's container, the icon Both answerers made an effective effort to provide useful information to the asker, and I don't think they should be downvoted when their answer is indeed effective.To me it makes no sense to place a simple color css directive into its own class and bundle it with your css assets. Adding fontawesome icon Plus-square-o(fa fa-plus-square-o) in web project is very simple.
I'm trying to display some icons in a page I've created. Thanks!You are truly a gentleman, not only was that my EXACT chain of thoughts and actions in the beginning but your post handled the problem...Sorry i'm not familiar with the "bootstreap CDN" :PIts really a mess in case design suffers due to browser issue. You can set your own for any color.Here I have defined a global style in my CSS where main-color is a class, in my case it is a light blue hue. The first class—fa—is a base class. To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon. Stack Overflow for Teams is a private, secure spot for you and He is a failed stand-up comic, a cornrower, and a book author.Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.If you're using Twitter Bootstrap 3.0, it's the same deal with the Nice! I am glad I wasn't the only one who had this happen. Hope this helps.In FontAwesome 4.0, the classes change to 'fa-2x', 'fa-3x'.Simply you can define a class in your css file and cascade it into html file like I had the same problem when I tried to use the icons directly from BootstrapCDN (the easiest way).
Is there any idea?Make sure you are using latest, up to date version of Font Awesome!Make sure to use the entire font awesome archive content.Do not just copy the font-awesome.css or font-awesome-min.css to your project.When you update the css files, make sure to replace all font in the webfonts Directory.Thanks for contributing an answer to Stack Overflow! All-New SVG Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. By using our site, you acknowledge that you have read and understand our :)I'm having the same issue but I already have class="fa fa-bars" .. Private self-hosted questions and answers for your enterpriseProgramming and related technical career opportunitiesYes this is same font for commenting,you can also try this. Featured on Meta I find that using inline styles on Icons with Font Awesome works well, esp in the case when you name your colors semantically, i.e. . Bootstrapicons is a search tool for icons in the bootstrap framework created by Brent Swisher. However, I am STILL baffled why font-awesome sometimes shows icons in white and sometimes in black. NOTE: The text colour will change the icon colour as well unless there is a changes the color to red. your coworkers to find and share information. Font Awesome 4.6.3 Class Explorer (version 4.6.3) Click each icon to get the associated HTML code.