Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon Alignment - Font Awesome 5 #8539

Closed
fxaviers opened this issue Jul 11, 2019 · 13 comments

Comments

@fxaviers
Copy link

commented Jul 11, 2019

Prerequisites

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • The issue still exists against the latest stable version of Elementor.

Description

Icon alignment overlaps the border of the column.
image

Ideally it should look like the example below:
image

Steps to reproduce

Just use the widget icon.

How to solve

Can be easily corrected with CSS.
But it is necessary to add another class to the icon, corresponding to the alignment, because the code below solves the problem in the left alignment. While aligning to the right is required to use the "right" instead of the "left".
.elementor-icon i:before, .elementor-icon svg:before { position: absolute; left: 0; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); }

Isolating the problem

  • This bug happens with only Elementor plugin active (and Elementor Pro).
  • This bug happens with a default WordPress theme active.
  • I can reproduce this bug consistently using the steps above.

Environment

System Info ``` ```
@drawcard

This comment has been minimized.

Copy link
Contributor

commented Jul 12, 2019

I wonder if it's related to the issues encountered sometimes when using FA in a list. Sometimes the icons are out of alignment and special classes need to be used on the <i> element to correct.

More info:
https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

@fxaviers

This comment has been minimized.

Copy link
Author

commented Jul 12, 2019

Yes, this is caused by the different width between the icons.
In a list is worse, regardless of the alignment of the icons (as can be seen in the image below).
The link solution above should be adopted in all places where FA5 is used.

image

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jul 14, 2019

@fxaviers

Thanks, as you know, some of the icons have different width, which may cause this issue to occur.

It's visible in lists, and that's why we added to Elementor v2.6 the option to align the icons inside the list.

We will consider adding the option fa-fw that @drawcard suggested after we will make sure it won't affect existing users.

Thanks!

@fxaviers

This comment has been minimized.

Copy link
Author

commented Jul 14, 2019

Thanks for listening @shilo-ey
I understand that in lists is a somewhat more complex problem to solve.
However, my first message deals with simple icons, not list. The object being larger than the column border is rather inconvenient.

@drawcard

This comment has been minimized.

Copy link
Contributor

commented Jul 15, 2019

fa-fw should fix the problem whether or not the icons are in a list, the setting is applied to any independent element using an icon. Here's a quick demo I put together using h2 tags: https://codepen.io/drawcard/pen/GbazBL (icons shaded orange to demonstrate the full width effect applied to them)

Perhaps the fa-fw could be applied to the icon widget wrapper, and flicked on/off with a toggle somewhere in a settings pane @shilo-ey ?

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Jul 15, 2019

Thanks, we are considering your suggestions.

@drawcard

This comment has been minimized.

Copy link
Contributor

commented Jul 16, 2019

Thank you @shilo-ey!

@arielk arielk added this to the 2.7.0 milestone Jul 18, 2019
KingYes added a commit that referenced this issue Jul 19, 2019
Icon List alignment issue - fix #8539
@KingYes KingYes closed this in eb8428d Sep 8, 2019
@fxaviers

This comment has been minimized.

Copy link
Author

commented Sep 13, 2019

@shilo-ey Can you reopen this issue? In the first message I asked about the icon overflowing the widget border and this was not fixed. Update 2.7.0 has corrected the alignment of icons in the list, not in simple icon widget.
The image below shows two simple icons with the error, and also the icons list widget (now correctly).
image

Thanks

@drawcard

This comment has been minimized.

Copy link
Contributor

commented Sep 16, 2019

When you inspect the icons in Chrome do they show the fa-fw class being applied to them? That class should take effect on any instance of icon usage, as demoed in my earlier CodePen link.

@fxaviers

This comment has been minimized.

Copy link
Author

commented Sep 16, 2019

@drawcard No, there is no such class. As far as I could understand, commit only affected the "assets/dev/scss/frontend/widgets/icon-list.scss " file.
This is frustrating, I described the problem, you showed the way to solve it, the issue was marked as solved, but the real problem still exists.
image

@drawcard

This comment has been minimized.

Copy link
Contributor

commented Sep 16, 2019

There may be a compatibility reason behind their decision not to roll it out for some widgets but I am curious, if you add the class in manually to the element does it work?

In Chrome Inspector, double click on the <i> element inside Chrome, and type fa-fw in the middle space where the classes are (fas fa-truck), I wonder if it will have any impact. It should given that fa-fw only adds a couple of simple properties like so:

.fa-fw {
  text-align: center;
  width: 1.25em;
}
@fxaviers

This comment has been minimized.

Copy link
Author

commented Sep 17, 2019

image

It worked! fa-fw corrects the alignment problem. I just needed to add the !important because there was another style with more weight .elementor-icon i.

@drawcard

This comment has been minimized.

Copy link
Contributor

commented Sep 18, 2019

Excellent - well if that's the case I would add my voice to getting Elementor's team to consider applying this to all icon applications across the board (or at least have it available as a toggle).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.