I am trying use font awesome +/x in the FAB to open/close. If I keep fonts folder from Material icons it works (with normal MD icon call ) but I wanna reduce app size carry on only with font awesome.
<div class="fab fab-left-bottom">
<a href="#">
<i class="fas fa-plus fa-2x"></i>
<i class="fas fa-times fa-2x"></i>
</a>
...The buttons do appear but at the same time.
Check the css styles for the original iconos. Maybe you need to chance something.
I will poke around with CSS and SVG icons to pick just what I need. Thanks for help
In the documentation, both icons have an additional class “icon”, maybe that makes the difference?
https://framework7.io/docs/floating-action-button.html#examples
It does work following the docs, but I wanna remove F7 icons as well material icons to reduce app size, and stick with only font awesome. And with font awesome + and x icon it doesnt work, show both icons, like in the image attached.
You should be able to replace the icons with anything you want, as long as you wrap them in <i> elements. The CSS to animate between the first and second icon is based on first and directly following <i> element:
I do wrap, but it doesnt work.
<div class="fab fab-left-bottom">
<a href="#">
<i class="fas fa-plus fa-2x"></i>
<i class="fas fa-times fa-2x"></i>
</a>
...Add icon class as well:
<a href="#">
<i class="icon fas fa-plus fa-2x"></i>
<i class="icon fas fa-times fa-2x"></i>
</a>
The issue was use font awesome JS/SVG instead of font awesome CSS/Webfonts. Beside that the JS from FA has conflict with FAB (F7), that I sort changing the fab reference inside FA JS, but it caused side effects. Thank you all for help.