1
Super Simple Info Icon using Entity Symbols
source link: https://codepen.io/mark_sottek/pen/XWZmvbm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Super Simple Info Icon using Entity Symbols
0 unsaved changes
xxxxxxxxxx
<span class="info-icon">ℹ</span>
@charset "UTF-8";
/* ENTITY ICONS/SYMBOLS NEED "UTF-8" SETTING. Usually default. */
/* Super simple icon using entity symbols. Swap out symbols to create different icons. Follows is a great resource for symbols: https://www.toptal.com/designers/htmlarrows/symbols/
Icon Markup */
/* Changing -icon-size will set the width, height and font size. Edit color scheme, width of stroke and hover states. Little off center because of line-height. Small things like that don't bother me too much anymore. Learned I'm the only one that will ever notice. : ) */
:root {--icon-size: 250px;
--icon-size-mobile: 100px;
--icon-border-radius: 50%;
--icon-color: white;
--icon-color-hover: white;
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK