bootstrap conflicts bootstrap awesome font icons

Question

I have a problem with bootstrap and bootstrap awesome font.<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> when I put these together something is not working. If I remove for example bootstrap, font awesome is working. I am trying to add social media buttons like this: social media buttons and it is working but without bootstrap. But when I add bootstrap I am loosing navigation bar: broken buttons when add bootstrap. Sorry for my bad explanation I am new in this :) any help would be appreciated.

Answer 1

Copy the code of font-awesome and bootstrap in new css file rather than cdn. Include bootstrap.css and then font-awesome.css in your Index.html, it would work.

Answer 2

I would suggest to download bootstrap and implement locally. This will solve the issue, if I am not mistaken the problem cause integrity, crossorigin attributes.

Answer 3

Have you tried to implement bootstrap first and then the bootstrap awesome one?

If css classes have the same name they override each other based on wich one is defined last. For example, when i add bootstrap.css first with a class .emoticon and after that a custom.css file that also has a .emoticon class it will use the implementation from the last one.

Hope this helps!