首页>建站相关>一套纯css实现的图标库-ICONO

一套纯css实现的图标库-ICONO

网络上有很多免费的图标库,比如fontawesome,比如typicons,利用一些小图标来代替呆板的文字描述,可以让页面显得更为简洁而生动。这类图标库也有一些美中不足之处,比如在不同分辨率下,可能产生边缘的锯齿,也可能会有部分几个图标,不太符合网页开发者的审美与需求。

ICONO这套图标库是在字节跳动静态资源公共库中看到的,在公共库输入了关键词“icon”试图找几个可以外部引用的图标库,结果发现了ICONO的存在。

对比其他图标库,该图标库仅提供了100+个图标,数量并不庞大,但接触过css人的知道,利用有限的元素做出这么多状态各异的图标,是需要极大的耐心与极巧妙的构思的。个人觉得,ICONO的学习参考的意义要大于实际应用。

参考作者的源码,可以自行改造几个现用图标库中不太满意的图标,也会加深对一些css属性的理解,毕竟纸上得来终觉浅,有了实际的案例,才能有更为深刻的印象。

ICONO展示页

https://saeedalipoor.github.io/icono/

ICONO的GIT地址

https://github.com/saeedalipoor/icono

ICONO图标一览

icono_pure_css_icon_library

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-eye-close
  • 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-youtube
  • 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-linkedIn
  • icono-instagram
  • icono-flickr
  • icono-delicious
  • icono-codepen
  • icono-blogger
  • 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-disqus
  • icono-cart
  • icono-caretRightCircle
  • icono-caretLeftCircle
  • icono-caretUpCircle
  • icono-caretDownCircle
  • icono-caretRightSquare
  • icono-caretLeftSquare
  • icono-caretUpSquare
  • icono-caretDownSquare
  • icono-dribbble
  • icono-sitemap
  • icono-spinner
  • icono-circle
  • icono-ellipsis

标签: css

移动端可扫我直达哦~

推荐阅读

css 2025-03-02

img插入div容器底部有3px白边

现象当盒子容器中中包含img元素时,如果连接区域对比度较高的情况下,会发现父元素的高度比img图片的高度多出3px,容器底部有一条明显的白边。<div> <img src=" "> ...

建站相关 css

css 2025-03-02

当网页中有遮罩时,如何禁止背景元素滚动

很多自适应的主题,在手机端都是选择把菜单栏隐藏在侧面,按需调用。调用的时候往往页面会显示一个遮罩,屏蔽掉了其他不相关元素的点击,但遮罩上即便设置了overflow属性,也无法阻挡背景body自由翻滚的热情。这个时候可以考虑给body临...

建站相关 css

css 2025-03-01

关于css的三维旋转rotateX,rotateY,rotateZ

试着写了一个前台登录窗口,想在展示的时候绕x轴以3d旋转的方式出现。旋转效果是实现了,但看着好像没有啥透视效果。记得之前修改wp主题的时候是实现过这个效果的,当真是学如逆水行舟,不进则退...退...退...测试了几个百度搜索到的代码...

建站相关 css

css 2025-02-28

站点导航条缩放动画不一致的问题

想问导航条增加一个滚动动画,向下滚动一段之后调整导航条高度,结果效果是有了,一看盒子高度先上去了,菜单栏却慢吞吞的隔了很久才到位,像极了工作摸鱼的打工人,盲目的调整了很久,最后发现是各部件动画持续时间不一致的问题。同一个模块中的零件,...

建站相关 css

css 2024-10-23

在CSS中的如何进行打印设置

之前翻阅wordpress默认主题的时候,看到主题的打印设置占了很大的篇幅,嫌太麻烦所以直接跳过了。这几天想要打印一份博客上的内容,觉得页眉侧栏以及页尾都有点多余,只需要打印博文部分的内容就可以了。于是只能重新去学习关于打印的语法,发...

建站相关 css

css 2023-10-14

Css中的反选伪类“:not()”

该“:not()”伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。描述使用 :not() 时,有几种不寻常的效果和结果需要注意:可以使用此伪类编...

建站相关 css

css 2023-09-06

浮动阴影-为什么我的css浮动元素总是差那么点意思

很多站点都这样的效果,鼠标移上去时对应元素上浮,然后这样的元素往往有一排。博主常见的操作是左右平移几次,然后元素就跟琴键一样依次浮动,看起来非常解压。虽然这个效果有个小小的bug,将鼠标停留在浮动起点与终点的一小块区域,会导致重复触发...

建站相关 css

css 2023-09-04

ios下safari浏览器hover失效的问题

修改主题的时候发现ios下hover子菜单弹出后收不回去,虽然刷新一下页面或者点击一个其他的按钮也能正确关闭,但是始终感觉操作不便。于是安装了一个第三方浏览器(夸克)尝试了一下,第三方浏览器是没有什么问题的,纯属safari的锅。找了...

建站相关 css

css 2023-05-25

如何用css实现一个导航条的logo

浏览网络的时候看见某个站点的导航条菜单图标很有意思,导航条logo一般都是3条横杠,该站点的其中一条横杠是略短的,鼠标悬停时会动态伸长。尝试着自己利用css实现了类似的效果,考虑将其放入正在修改的wordpress主题当中,先记录一下...

建站相关 css