___ ____ __ _ ____ ____ __ ___ __ __ _ ____
/ __)( __)( ( \( __)( _ \( )/ __)/ \ ( ( \/ ___)
( (_ \ ) _) / / ) _) ) / )(( (__( O )/ /\___ \
\___/(____)\_)__)(____)(__\_)(__)\___)\__/ \_)__)(____/
Genericons are vector icons embedded in a webfont designed to be clean and simple keeping with a generic aesthetic.
Use genericons for instant HiDPI, to change icon colors on the fly, or even with CSS effects such as drop-shadows or gradients!
_ _ ____ ____ ____ ____
| | [__ |__| | __ |___
|__| ___] | | |__] |___
To use it, place the font folder in your stylesheet directory and paste this in your CSS file:
/* =Genericons, thanks to FontSquirrel.com for conversion!
-------------------------------------------------------------- */
@font-face {
font-family: 'Genericons';
src: url('font/genericons-regular-webfont.eot');
src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/genericons-regular-webfont.woff') format('woff'),
url('font/genericons-regular-webfont.ttf') format('truetype'),
url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
font-weight: normal;
font-style: normal;
}
Note: the above only works if you don't use a CDN. If you do, or don't know what that is, you should use the syntax that's embedded in genericons.css.
From then on, you can create an icon like this:
.my-icon:before {
content: '\f101';
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'Genericons';
vertical-align: top;
}
This will output a comment icon before every element with the class "my-icon". The "content: '\f101';" part of this CSS is easily copied from the helper tool at http://genericons.com/
You can also use the bundled example.css if you'd rather insert the icons using HTML tags.
_ _ ____ ___ ____ ____
|\ | | | | |___ [__
| \| |__| | |___ ___]
Photoshop mockups:
Genericons-Regular.otf found in the root directory of this zip has not been web-font-ified. So you can drop it in your system fonts folder and use the font in Photoshop if you like.
For those of you using Genericons in your Photoshop mockup, remember to delete the old version of the font from Font Book, and grab the new one from the zip file. This also affects using it in your webdesigns: if you have an old version of the font installed locally, that's the font that'll be used in your website as well, so if you're missing icons, check for old versions of the font on your system.
Pixel grid:
Note that Genericons has been designed for a 16x16 pixel grid. That means it'll look sharp at font-size: 16px exactly. It'll also be crisp at multiples thereof, such as 32px or 64px. It'll also look reasonably crisp at in-between font sizes such as 24px or 48px, but not quite as crisp as 16 or 32. Please don't set the font-size to 17px, though, that'll just look terrible.
Also note the CSS property "-webkit-font-smoothing: antialiased". That makes the icons look great in WebKit browsers. Please see http://noscope.com/2012/font-smoothing for more info.
Updates:
We don't often update icons, but do very carefully when we get good feedback suggesting improvements. Please be mindful if you upgrade, and check that the updated icons behave as you intended.
____ _ _ ____ _ _ ____ ____ _ ____ ____
| |__| |__| |\ | | __ |___ | | | | __
|___ | | | | | \| |__] |___ |___ |__| |__]
V3.0.2:
A slew of new stuff and updates.
- Social icons: Skype, Digg, Reddit, Stumbleupon, Pocket.
- New generic icons: heart, lock and print.
- New editing icons: code, bold, italic, image
- New interaction icons: subscribe, unsubscribe, subscribed, reply all, reply, flag.
- The hyperlink icon has been updated to be clearer, chunkier.
- The "home" icon has been updated for style, size and clarity.
- The email icon has been updated for style and clarity, and to fit with the new subscribe icons.
- The document icon has been updated for style.
- The "pin" icon has been updated for style and clarity.
- The Twitter icon has been scaled down to fit with the other social icons.
V3.0.1:
Mostly maintenance.
- Fixed an issue with the example page that showed an old "top" icon instead of the actual NEW "refresh" icon.
- Added inverse Google+ and Path.
- Replaced tabs with spaces in the helper CSS.
- Changed the Genericons.com copy/paste tool to serve span's instead of div's for casual icon insertion. It's being converted to "inline-block" anyway.
V3.0:
Mainly maintenance and a few new icons.
- Fast forward, rewind, PollDaddy, Notice, Info, Help, Portfolio
- Updated the feed icon. It's a bit smaller now for consistency, the previous one was rather big.
- So, the previous version numbering, 2.09, wasn't very PHP version compare friendly. So from now on it'll be 3.0, 3.1 etc. Props Ipstenu.
- Genericons.com now has a mini release blog.
- The CSS has prettier formatting, props Konstantin Obenland.
V2.09:
Updated Facebook icon to new version. Updated Instagram logo to use new one-color version. Updated Google+ icon to use same radius as Instagram and Facebook. Added a bunch of new icons, cog, unapprove, cart, media player buttons, tablet, send to tablet.
V2.06:
Included Base64 encoded version. This is necessary for Genericons to work with CDNs in Firefox. Firefox blocks fonts linked from a different domain. A CDN (typically s.example.com) usually puts the font on a subdomain, and is hence blocked in Firefox.
V2.05:
Added a bunch of new icons, including upload to cloud, download to cloud, many more.
V2:
Initial public release
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论
收起资源包目录
基于HTML实现的无锡侬侬婚纱摄影手机模版(源代码+使用说明+论文).rar (62个子文件)
twentyfourteen
style.css 77KB
rtl.css 15KB
inc
widgets.php 9KB
back-compat.php 2KB
template-tags.php 6KB
custom-header.php 4KB
customizer.php 5KB
featured-content.php 15KB
content-video.php 2KB
content-aside.php 2KB
page.php 1KB
languages
twentyfourteen.pot 10KB
content-gallery.php 2KB
header.php 3KB
author.php 2KB
content-image.php 2KB
js
html5.js 2KB
keyboard-image-navigation.js 496B
functions.js 3KB
featured-content-admin.js 329B
slider.js 19KB
customizer.js 962B
sidebar-content.php 356B
genericons
LICENSE.txt 18KB
font
genericons-regular-webfont.ttf 18KB
genericons-regular-webfont.svg 39KB
genericons-regular-webfont.eot 9KB
genericons-regular-webfont.woff 11KB
Genericons-Regular.otf 17KB
example.html 19KB
README.txt 6KB
COPYING.txt 1KB
genericons.css 22KB
content-link.php 2KB
sidebar.php 877B
footer.php 768B
screenshot.png 603KB
single.php 1KB
css
ie.css 24KB
editor-style.css 6KB
content-featured-post.php 1KB
category.php 2KB
taxonomy-post_format.php 2KB
index.php 2KB
archive.php 2KB
content-audio.php 2KB
page-templates
contributors.php 1KB
full-width.php 939B
404.php 719B
sidebar-footer.php 395B
search.php 1KB
content.php 2KB
comments.php 2KB
featured-content.php 946B
content-none.php 961B
image.php 3KB
content-page.php 871B
tag.php 2KB
images
pattern-dark.svg 1KB
pattern-light.svg 540B
functions.php 16KB
content-quote.php 2KB
共 62 条
- 1
资源评论
心梓知识
- 粉丝: 6383
- 资源: 3万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功