Wrapping an Icon!

Written by

There are different ways to wrap an Icon


Div

  • Not clickable like a button or link
  • A BLOCK and takes the WHOLE ROW
  • Support height, weight, padding and margin

Span

  • Not clickable
  • A inline-text, might be for small icon inside a sentence or aligning with other icons
  • Needs to be inline-block to use transform

Button

  • For iterative icons, such as menus and share icons
  • Acts as block or flex

<a>

  • For social icons or external links
  • Needs to be inline-block or block to use block properties

Nav.Link

  • For social icons or external links
  • Already be a inline-block
  • Integration with Nav, Nav.Item or so, works well in navbar

One response

  1. […] Check multiple ways to wrap an icon here! […]

Leave a Reply

Discover more from Daily Learning

Subscribe now to keep reading and get access to the full archive.

Continue reading