ICONO 纯 CSS 绘制的一套图标库

2017, Jan 20    

说明

ICONO是一套使用CSS 绘制的图标库。 优点是不包含任何其他依赖,体积较小min+gzip后只有 7kb,包含137个图标,但是CSS图标的缺点也很明显,不能像字体图标一样那么简单就能修改图标大小。CSS绘制的图标,修改大小只能通过一些其他的方式,我是用 CSS3transform:scale(0.5) 来进行图标的大小修改。

我使用ICONO作为我博客前端的图标库使用。 这里整理了一个 class 对应的图标表,方便自己使用这些图标。

ICONO 图标名称对应表

icono-icono icono-home icono-mail icono-rss icono-hamburger icono-plus icono-cross icono-check icono-power icono-heart icono-infinity icono-flag icono-file icono-image icono-video icono-music icono-headphone icono-document icono-folder icono-pin icono-smile icono-eye icono-sliders icono-share icono-sync icono-reset icono-gear icono-signIn icono-signOut icono-support icono-dropper icono-tiles icono-list icono-chain icono-rename icono-search icono-book icono-forbidden icono-trash icono-keyboard icono-mouse icono-user icono-crop icono-display icono-imac icono-iphone icono-macbook icono-imacBold icono-iphoneBold icono-macbookBold icono-nexus icono-microphone icono-asterisk icono-terminal icono-paperClip icono-market icono-clock icono-textAlignRight icono-textAlignCenter icono-textAlignLeft icono-indent icono-outdent icono-frown icono-meh icono-locationArrow icono-plusCircle icono-checkCircle icono-crossCircle icono-exclamation icono-exclamationCircle icono-comment icono-commentEmpty icono-areaChart icono-pieChart icono-barChart icono-bookmark icono-bookmarkEmpty icono-filter icono-volume icono-volumeLow icono-volumeMedium icono-volumeHigh icono-volumeDecrease icono-volumeIncrease icono-volumeMute icono-tag icono-calendar icono-camera icono-piano icono-ruler icono-cup icono-creditCard icono-facebook icono-twitter icono-gplus icono-youtube icono-linkedIn icono-instagram icono-flickr icono-delicious icono-codepen icono-blogger icono-disqus icono-dribbble icono-play icono-pause icono-stop icono-rewind icono-forward icono-next icono-previous icono-caretRight icono-caretLeft icono-caretUp icono-caretDown icono-rightArrow icono-leftArrow icono-upArrow icono-downArrow icono-sun icono-moon icono-caretRightCircle icono-caretLeftCircle icono-caretUpCircle icono-caretDownCircle icono-caretRightSquare icono-caretLeftSquare icono-caretUpSquare icono-caretDownSquare icono-cart icono-sitemap icono-keyboard icono-plus icono-mouse icono-plus icono-display icono-cross