[SOLVED] [V4] Floating Action Button Not Display


#1

Hi,

Floating Action Button Not Display V4

> <div data-name="personList" class="page">
>              <div class="navbar no-hairline no-shadow" style="background-image: linear-gradient(#023662,#07b3e4);box-shadow: none">
>     <div class="navbar-inner">
>     <div class="left"><a href="pages/dashboard.html" class="back link icon-only w3-text-white"><i class="icon icon-back"></i></a></div>
>       <div class="title"><span style="font-family:Chococooky" class="w3-text-white">Beneficiary List</span></div>
>       <div class="right"><a href="#" class="link panel-open icon-only w3-text-white"><i class="f7-icons">bars</i></a></div>
> 
>       <div class="subnavbar no-hairline no-shadow" style="background-color:#07b3e4;box-shadow:none">
>         <form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
>           <div class="searchbar-inner">
>             <div class="searchbar-input-wrap">
>               <input type="search" placeholder="Search"/>
>               <i class="searchbar-icon"></i>
>               <span class="input-clear-button"></span>
>             </div>
>             <span class="searchbar-disable-button if-not-aurora">Cancel</span>
>           </div>
>         </form>
>       </div>
> 
>     </div>
> </div>
> 
> <div class="fab fab-right-bottom color-green"></div>
>   
>   
> 
> <div class="searchbar-backdrop"></div>
> 
>       <div class="page-content ptr-content hide-navbar-on-scroll" data-ptr-distance="55" data-ptr-mousewheel="true">
> 
>   <!-- Default pull to refresh preloader-->
>     <div class="ptr-preloader">
>       <div class="preloader"></div>
>       <div class="ptr-arrow"></div>
>     </div>
> 
>     <div class="list simple-list searchbar-not-found">
>       <ul>
>         <li>Nothing found</li>
>       </ul>
>     </div>
>   
>     <div id="bVList" class="list virtual-list media-list searchbar-found" style="margin-top:0px">
> 
> 
>   </div>
> 
>     
> 
>   </div>
> 
>           </div>

#2

Hi,

I found the bug that was Font Awesome Free 5.0.2 and it conflict with F7 floating action button. And i updated it into 5.8 version and FAB is now showing

I hope someone get an idea from this comment

Thanks
Love F7


#3

Hi,

Not only that but also if you use any version of Font Awesome SVG then FAB will not diaply, but if you use Font Awesome Webfont then FAB will display

So don’t use this

> <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>

Use this

> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">