• The_Decryptor@aussie.zone
    link
    fedilink
    English
    arrow-up
    2
    ·
    20 hours ago
    <p><svg class="icon">...</svg> Text</p>
    
    p .icon {
        --size: 1.25em;
        vertical-align: calc(0.5cap - 0.5 * var(--size));
        height: var(--size);
        width: var(--size);
    }
    

    Done.

    • hperrin@lemmy.ca
      link
      fedilink
      English
      arrow-up
      3
      ·
      17 hours ago
      • Doesn’t work with non-square icons.
      • Doesn’t align with multi-line text (text wraps to underneath icon).
      • Only aligns centered (no baseline).

      But that’s pretty good for most cases.

      • The_Decryptor@aussie.zone
        link
        fedilink
        English
        arrow-up
        2
        ·
        16 hours ago

        Ahh, yeah that’s a bit harder, CSS multiline stuff is pretty flaky from what I can recall. You need to drop down to block layout, e.g. making the containing element a flex parent (Better term than that?) and then making the icon centered within that can work, but then we’re back to square one with sizing the icon.