Need HTML help, icons should be in line, not below each other

help
1

Surely a noob question but I can’t figure out why the icons here are not in line (like the others in this picture) but rather below each other:

Screenshot 2023-03-01 at 00.57.50

Corresponding code:

<li style="display: {{isFamilyTreePage}};">
            <a href="#" class="menu-text" id="btn-tree-home" data-link="home Family Tree"
               data-tooltip='<i class="fa fa-lg fa-question-circle" aria-hidden="true"></i> Back to root of family tree'
               data-tooltip-direction="s">
                <i class="fa fa-home"></i>
            </a>
            <a href="#" class="menu-text" id="btn-zoom-in" data-link="zoom Family Tree"
               data-tooltip='<i class="fa fa-lg fa-question-circle" aria-hidden="true"></i> Zoom in'
               data-tooltip-direction="s">
                <i class="fa fa-search-plus"></i>
            </a>
            <a href="#" class="menu-text" id="btn-zoom-out" data-link="zoom Family Tree"
               data-tooltip='<i class="fa fa-lg fa-question-circle" aria-hidden="true"></i> Zoom out'
               data-tooltip-direction="s">
                <i class="fa fa-search-minus"></i>
            </a>
        </li>

Thanks in advance!

2

To align icons horizontally in HTML, you can use CSS to control the display and positioning of the icons. Here’s an example of how to use CSS to align icons horizontally:

In this example, we define a container element with the class “icon-container”, which uses the CSS “display: flex” to create a flexible box layout. We also set the “flex-direction” property to “row” to ensure that the icons are aligned horizontally.

We then define a separate CSS style for the individual icons, using the class “icon”. We set a margin-right of 10 pixels to provide some spacing between the icons.

Finally, we include the HTML code for the three icons within the “icon-container” div.

This should ensure that the icons are aligned horizontally and not stacked vertically. You can adjust the CSS properties as needed to achieve the desired alignment and spacing.