Floating buttons with Font Awesome 5 JS

Topic: Floating buttons with Font Awesome 5 JS

jouvrard pro asked 6 years ago

Hello, I try to use the floating buttons with the JS version of Font Awesome 5.2.0, but there is a problem: The icon isn't centered but is positioned in the top left corner of the button. If I use it without "btn-dloating", it works perfectly. Are you aware if there is a problem with Font Awesome 5.2 JS version?

Add comment

jouvrard pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Ok for the "+" sign, but what I don't undestand is why I have the same problem with:

<a href="#" class="btn-floating blue-gradient"><i class="fal fa-plus text-white"></i></a>

Because I have an "i" tag (but using FA 5.2). But after a test, your solution works with this too.

<a href="#" class="btn-floating blue-gradient"><span clas="fab-content"><i class="fal fa-plus text-white"></i></span></a>

I tested an other solution which works too:

<a href="#" class="btn-floating blue-gradient d-flex align-items-center justify-content-center"<i class="fal fa-plus text-white"></i>/a>

With this solution I'm not dependant of the lien height of the button, if you change it one day.
Is this solution good too, or it's better to use yours?

Bartłomiej Malanowski staff commented 6 years ago

Both solutions are correct, so it depends on you which one do you want to use

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

You're facing this issue because we're styling the content of floating button using this selector: `.btn-floating i`. In your example, you have only a "+" sign. To add some styles to your "plus" you need to add some styles. For the first, add this class to your CSS code:

.fab-content {
    display: inline-block;
    line-height: 47px;
    width: inherit;
    text-align: center;
    color: #fff;
  }

and then replace:

<a class="btn-floating peach-gradient">+</a>

with:

<a class="btn-floating peach-gradient"><span class="fab-content">+</span></a>

Add comment

jouvrard pro answered 6 years ago

0 0 Best answer

<p>I tried with my code (with Font Awesome 5.2), dans with the demo page present in the MDBootstrap Pro package:</p>
<p>My code (FA 5.2), doesn't work. If I replace the FA icon by a "+" for example, the problem is the same.</p>
<pre>Start your code here
<span><a href="#" class="btn-floating blue-gradient"></span>
<span><i class="fal fa-plus text-white"></i></span>
<span></a></span></pre>
<p>Here is a test on the MDB demo page, placed just after the <body> tag</p>
<pre>Start your code here
<div class="container-fluid">
        <div class="row">
            <div class="col-12">
		<a class="btn-floating peach-gradient">+</a>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <a class="btn-floating peach-gradient"><i class="fa fa-leaf"></i></a>
            </div>
        </div>
    </div></pre>
<p>No problem with the leaf, but problem with the "+", which is in the top left corner of the button, like with FA 5.2 icons.<br />
If I try this same code with FA 5.2, the leaf will be placed in the top left corner again, even if I try with "fa", "fal", "far" or "fas" class.</p>

Please insert min. 20 characters.

I tried with my code (with Font Awesome 5.2), dans with the demo page present in the MDBootstrap Pro package:

My code (FA 5.2), doesn't work. If I replace the FA icon by a "+" for example, the problem is the same.

Start your code here
<a href="#" class="btn-floating blue-gradient">
<i class="fal fa-plus text-white"></i>
</a>

Here is a test on the MDB demo page, placed just after the <body> tag

Start your code here
<div class="container-fluid">
        <div class="row">
            <div class="col-12">
		<a class="btn-floating peach-gradient">+</a>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <a class="btn-floating peach-gradient"><i class="fa fa-leaf"></i></a>
            </div>
        </div>
    </div>

No problem with the leaf, but problem with the "+", which is in the top left corner of the button, like with FA 5.2 icons.
If I try this same code with FA 5.2, the leaf will be placed in the top left corner again, even if I try with "fa", "fal", "far" or "fas" class.

Add comment

jouvrard pro answered 6 years ago

0 0 Best answer

For information, it works with this:

Start your code here
<a class="btn-floating btn-lg blue-gradient d-flex align-items-center justify-content-center"><i class="fa fa-bolt text-white"></i></a>

jouvrard pro commented 6 years ago

I've tried without Font Awesome, but juste with a text Inside the floating button, and the result is the same. I have to add "flex" to have a centered content.

Bartłomiej Malanowski staff commented 6 years ago

Currently, we don't support FA5. However, could you please show us your full code?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

jouvrard

Pro User 898Support score
46Questions 70Answers 11Snippets