search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
850 stars 169 forks source link

Alignment of round icon in a heading h4 #4891

Open edlerd opened 1 year ago

edlerd commented 1 year ago

Describe the bug

Consider a h4 heading is containing text with an info icon next to it. The icon seems to float above the baseline. I think this is a visual oddity due to the shape of the icon with the round outline.

To Reproduce

Steps to reproduce the behavior:

  1. Render this bit: <h4>Further reading <i class="p-icon--information"></i></h4>
  2. See rendered result

Expected behavior

The icon should appear on the header text baseline

Screenshots

Screenshot from 2023-10-12 12-06-28 Screenshot from 2023-10-12 12-06-23

Desktop (please complete the following information):

Additional context

We encountered this in https://github.com/canonical/lxd-ui/pull/483 where info icons are placed in headings for LXD-UI to link to the documentation. Temporary mitigation is adding some top margin to the icon, so it is pushed down a bit and appears aligned.

Gauravtb2253 commented 1 year ago

please assign this to me

anthonydillon commented 1 year ago

@Gauravtb2253 you got it

Gauravtb2253 commented 1 year ago

<!DOCTYPE html>

Alignment of round icon

Further reading

Just in place of src add the link of your fontawesome kit

image
Gauravtb2253 commented 1 year ago

Please check and merge it

syncronize-issues-to-jira[bot] commented 2 months ago

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15242.

This message was autogenerated

bartaz commented 2 months ago

Triage: icon/text alignment. To be revisited in new architecture.