nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Icon size doesn't match text size (too large)

lmarun

I'd like to include and external link icon for some of our links, but the icon is too big.

How can I use a smaller version of this?

Here's some sample code, and a screenshot of what it looks like:

<a href="https://www.youtube.com/@OurChannel/videos" target="_blank">Visit our YouTube channel <calcite-icon icon="launch-2" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="m" calcite-hydrated=""></calcite-icon></a>.

large link icon.png

Trouver plus de publications taguées avec

Accepted answers

JenniferAcunto

Change scale="m" to scale="s"

<a href="https://www.youtube.com/@OurChannel/videos" target="_blank">Visit our YouTube channel <calcite-icon icon="launch-2" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="m" calcite-hydrated=""></calcite-icon></a>.

All comments

BrianRollison

Consider using a calcite link, the icon is specified as a proper of the calcite component and it's sizing is kept aligned with the scale of the link itself: https://developers.arcgis.com/calcite-design-system/components/link/.

Explore around in the calcite playground and copy/paste the HTML directly into the Text Card's HTML editor. There are more props to include, but it would look something like <calcite-link icon-end="launch" ...more props...>Visit our YouTube channel</calcite-link>.

lmarun

Yes, of course!!

Thank you, Jen! 🙂

JenniferAcunto

Change scale="m" to scale="s"

<a href="https://www.youtube.com/@OurChannel/videos" target="_blank">Visit our YouTube channel <calcite-icon icon="launch-2" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="m" calcite-hydrated=""></calcite-icon></a>.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.