Changing the icon size

  • Resolved Kennedy

    (@haggenkennedy)


    8 months, 4 weeks ago

    Hi, I’m trying to find out how I can change the size of the icon assigned to external links.

    I found this thread, in which someone had the exact same issue as I’m having now (the icon is half the height of my font, which is set to 24px), but the answer stated simply:

    you’ll have to write custom CSS, target the icon and change its size.

    That’s ok, of course, but I’m not a coder/programmer, and I need to know how to target the icon in the first place, and then what, exactly, I need to do to change it.

    To illustrate, when I inspect one of my external links, this is what I get:

    <p>
    <a href="https://en.uoa.gr/" target="_blank" rel="noopener noreferrer nofollow external" data-wpel-link="external" title="External Link: " class="external-link wpel-icon-right">University of Athens<span class="wpel-icon wpel-image wpel-icon-6"></span></a>
    </p>

    Based on the answer from that thread, I figured the icon was probably “wpel-icon-6“, so I tried targeting it in a few different ways:

    .wpel-icon-6 {
    display: inline-block;
    transform: scale(1em);
    font-size: 1em;
    line-height: 0;
    vertical-align: middle;
    }

    .wpel-icon-6 img {
    display: inline-block;
    width: 1em;
    height: 1em;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 0.3em;
    }

    .wpel-icon-6 {
    display: inline-block;
    vertical-align: middle;
    font-size: 1em;
    line-height: 0;
    width: 1em;
    height: 1em;
    overflow: hidden;
    }

    .wpel-icon-6 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-left: 0.3em;
    }

    .wpel-icon-6 .wpel-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 0.3em;
    }

    Nothing worked, so I’m unsure if I’m targeting the correct icon, if I’m writing poor CSS, or even if, perhaps, it’s something else altogether. Would anyone be able to help shed some light on the subject?

    Thank you so much in advance.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Alexandru Tapuleasa

    (@talextech)

    8 months, 3 weeks ago

    Hi,

    Just adding this to your theme’s Custom CSS or in Appearance -> Customize -> Custom CSS should do it 🙂
    .wpel-icon {
    font-size: 22px !important;
    }

    Thread Starter Kennedy

    (@haggenkennedy)

    8 months, 3 weeks ago

    First of all, thank you so much for getting back to me, I really appreciate it. 👍🏻

    I copy-pasted your code into my “Custom CSS” area, but nothing happened. So, I changed the font-size to 60px, and, much like before (during my own attempts using my own code), I noticed that some invisible padding around the icon would get larger, because the icon would suddenly move away from the text. However (and this is key), even though the padding around it would get larger, the icon itself always remains the same size, unchanged.

    Because of that, I thought the icon was an image (in which case font-size would have no effect?). That’s why I tried to target it as an “img”, and defined width and height. When that didn’t work, it made me think that the <img> tag itself was having its “box” adjusted, but the image content wasn’t being properly scaled by the properties alone that I’d set, or maybe something else was controlling its size.

    I also tried transform: scale() and object-fit, but they didn’t work either. Maybe the <img> element itself has intrinsic dimensions, and the container (.wpel-icon or .wpel-image) is influencing its positioning without directly resizing the image content. I really have no idea.

    If you need to check the actual page to inspect something, this is the link to my website. Right after the full-width landing section, it’s the very first link you’ll find on the page.

    Again, thanks for helping!

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    8 months, 3 weeks ago

    Thanks for providing the link to the page.

    I see you are using image icons. Those have a fixed size normally. You can scale them up a bit but they will start getting blurry at some point.

    But this seems decent:
    .wpel-icon.wpel-image {
    height: 16px !important;
    transform: scale(1.6) !important;
    }

    Thread Starter Kennedy

    (@haggenkennedy)

    8 months, 2 weeks ago

    Hi, Alexandru. Thank you so much for getting back to me so quickly. I apologize for my tardiness — I’ve been traveling for work and couldn’t test out your solution until now.

    .wpel-icon.wpel-image {
    height: 16px !important;
    transform: scale(1.6) !important;
    }

    This particular code did the trick, thank you so much.

    Incidentally, I noticed that the link underline extends to the icon as well (and I’d like to remove it from the icon, leaving only the text underlined). The reason it does that, I know, is because I’m using a CSS code (border-bottom: 2px solid #0073e6;) for links.

    This, of course, has nothing to do with you or your plugin. I just thought I’d ask you anyway, because I’m not a programmer/dev, and maybe you know how to fix it.

    If you don’t want to or can’t, that’s ok, of course. Thank you so much for helping me with the icon size. Honestly, I’m already happy that this particular issue is fixed. 🥳🎉

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    8 months, 1 week ago

    Unfortunately, the border-bottom is applied to the <a> element that contains both the link and icon so it will show under everything. You would have to wrap the text in a separate span and only apply the border to that, like:
    a span{
    border-bottom: 2px solid #0073e6;
    }

    Thread Starter Kennedy

    (@haggenkennedy)

    8 months, 1 week ago

    Thank you so much, Alexandru. I deeply appreciate your willingness to help, it really made a huge difference. ❤️👍🏻

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    8 months, 1 week ago

    No problem 🤗

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Changing the icon size’ is closed to new replies.

Tags