Using Font Awesome

Bootstrap Studio Help
1

I have a strange behaviour.
I am using font awesome on some buttons.
In Bootstrap Studio they render correctly.

image
image698×305 16.9 KB

But when I export the site, I get something else.
image

Any idea what I am doing wrong?

2

It looks like the font might not be loading, press f12 in your browswer and see if you are getting any 404 errors. Although I’m sure if that is the case then they wouldn’t appear, so it could be a font conflict. Are you using font awesome 4 or 5?

3

if you drop an icon onto the button then it will not happen

<button class="btn" type="button">
	<i class="fas fa-search-plus"></i>
</button>
<button class="btn" type="button">
	<i class="fas fa-search-minus"></i>
</button>
4

Hello Richard.

Than k you for your answer. I am new to Bootstrap studio and to Html in general.
I see in the eader part of the page that BSS has added the link to assets/fonts/font-awesome.min.css. It is thus taking it locally. I checked and the files are there. I have however no idea how they came there and don’t know which version it is. I guess BSS does it automatically. The strange thing is that it renders well inside BSS.

5

Hello Kuligaposten.

I have tried out your suggestion, but I get the same result.

6

Try changing your class to “fa fa-search-minus” instead of “fas fa-search-minus”

And the same with the plus button

It is a clash of font awesome 4 and 5

7

Hello Richards.

This works. Thanks a lot.