Locally loaded icons are not centred with link component text

Anvil Q&A
1

If I use an inbuilt font awesome icon on a link component, the icon and the link text look centred. If I upload an SVG asset and set the icon to the url, the icon is lower than the text.

In this screenshot, “Dashboard” is using the loaded SVG file from flaticons.com/uicons (with the link’s icon property set to ‘_/theme/home.svg’), whilst “Numbers” is using the built in FA icon (with the link’s icon property set to ‘fa:th-list’)

image

Is there any way to easily correct this?

edit - interestingly, the text is better centred if the icon is put to the right than if it it on the left :

image

edit 2 - OK, found the reason - it’s missing the “fa” class in the css for that icon. if I insert it manually using the inspector the icon raises itself correctly. Is there anyway to do this in my app? By that I mean does anyone know how I can change the CSS in theme.css to make manually loaded icons appear centred when on the left side of a link text?

edit 3 - if I take out the position: relative from the theme.css here :

.left-nav .anvil-component-icon.left-icon {
  width: 0;
  margin-right: 56px;
  position: relative;
  top: 0.15em;  
}

then it works but it messes up any font awesome positioning, forcing me to choose. Which is ok for this app, but is there a better way?

2

Hi David!

Have you solved the problem? I am currently experiencing the exact same issue.

3

No, sorry. I went back to using the built in icons.

5

You can make a custom component for the label component to set the icons and text independently.

You put a link and inside it a custom component label made according to this instruction. It is possible to change almost everything if you split icon from the label. Add more properties if you need them.

Not sure how it will work with SVG. You need to test it.

image

6

In case someone has a similar question:

The proposed solution worked well. In my usecase it was also helpful to create an icons font. That way the icon behaves like text and adopts any color settings (e.g. when hovering over a link and so on.).