【CSS3】CSS3图标集锦

admin · 发表于 2015-12-27 22:18:04

200个纯CSS3写的图标支持复制代码
http://www.uiplayground.in/css3-icons/

CSS3神器实现ico小图标
http://www.w3cfuns.com/forum.php ... 5596008&from=portal

据说阿里巴巴推出的矢量图标库
http://www.Iconfont.cn

Font Awesome可缩放的矢量图标
您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
http://fontawesome.dashgame.com/
参考手册：
http://www.runoob.com/font-awesome/fontawesome-reference.html

https://icons8.com/

https://icomoon.io/app/#/select

https://www.flaticon.com/

admin · 发表于 2017-11-16 08:31:41

https://saeedalipoor.github.io/icono/
TIM截图20171116083017.png

使用方法

首先你需要将 icono.min.css 文件加入到HTML文档的头部。

你可以通过元素的样式来改变图标的颜色(默认为白色)：

<i class="icono-mail heart"></i>
i.heart{color: red;}

你可以通过以下脚本实现图标缩放
transform:scale(2);//设置缩放比例
-ms-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
-moz-transform:scale(2);

所有可用的图标class：

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-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

需要CSS库加群联系，调用时只需调用相应的Class值即可。
模板：mstjs/include/icono.min.css

admin · 发表于 2017-11-16 09:43:53

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

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

admin · 发表于 2018-6-7 17:47:21

测试平台：http://www.w3school.com.cn/tiy/t.asp
两种方法，都很简单，欢迎提供第三种方案。
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<style>
p:before {
content: "\f292";
font-family: FontAwesome;
}
</style>
<body>
<p>更简洁的方法</p>
<span><i class="fa fa-chrome"></i>需要辅助的方法</span>
</body>
</html>

		自动登录	找回密码
密码			立即注册

【CSS3】CSS3图标集锦

130个白色图标集纯CSS调用极简

ICONO 纯 CSS 绘制的一套图标库

实现图标的调用：