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
5 tasks done
fxaviers opened this issue Jul 11, 2019 · 13 comments
Closed
5 tasks done

Icon Alignment - Font Awesome 5 #8539

fxaviers opened this issue Jul 11, 2019 · 13 comments

Comments

@fxaviers
Copy link

@fxaviers fxaviers 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
Copy link
Contributor

@drawcard drawcard 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
Copy link
Author

@fxaviers fxaviers 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
Copy link
Collaborator

@shilo-ey shilo-ey 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
Copy link
Author

@fxaviers fxaviers 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
Copy link
Contributor

@drawcard drawcard 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
Copy link
Collaborator

@shilo-ey shilo-ey commented Jul 15, 2019

Thanks, we are considering your suggestions.

@drawcard
Copy link
Contributor

@drawcard drawcard 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
Copy link
Author

@fxaviers fxaviers 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
Copy link
Contributor

@drawcard drawcard 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
Copy link
Author

@fxaviers fxaviers 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
Copy link
Contributor

@drawcard drawcard 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
Copy link
Author

@fxaviers fxaviers 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
Copy link
Contributor

@drawcard drawcard 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
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants