Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
87816500a6 | ||
|
|
3989e1f450 | ||
|
|
3e3300395a | ||
|
|
3aa108639d | ||
|
|
2b8283ed89 | ||
|
|
4d1c0c85a6 | ||
|
|
dc0748284b | ||
|
|
26563868af | ||
|
|
e258184716 | ||
|
|
4f3aedcdbe | ||
|
|
bb96e5b686 | ||
|
|
f70e3c08da | ||
|
|
9037f65f7a | ||
|
|
dbe23fa6f9 | ||
|
|
b502bf4430 |
@@ -9,7 +9,7 @@
|
||||
<body>
|
||||
<h1 id="logo">
|
||||
<a href="https://wordpress.org/"><img alt="WordPress" src="wp-admin/images/wordpress-logo.png" /></a>
|
||||
<br /> Version 4.1.3
|
||||
<br /> Version 4.1.5
|
||||
</h1>
|
||||
<p style="text-align: center">Semantic Personal Publishing Platform</p>
|
||||
|
||||
|
||||
@@ -42,18 +42,26 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
||||
</h2>
|
||||
|
||||
<div class="changelog point-releases">
|
||||
<h3><?php echo _n( 'Maintenance and Security Release', 'Maintenance and Security Releases', 3 ); ?></h3>
|
||||
<h3><?php echo _n( 'Maintenance and Security Release', 'Maintenance and Security Releases', 5 ); ?></h3>
|
||||
<p><?php printf( _n( '<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bug.',
|
||||
'<strong>Version %1$s</strong> addressed some security issues and fixed %2$s bugs.', 3 ), '4.1.5', number_format_i18n( 3 ) ); ?>
|
||||
<?php printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.1.5' ); ?>
|
||||
</p>
|
||||
<p><?php printf( _n( '<strong>Version %1$s</strong> addressed a security issue.',
|
||||
'<strong>Version %1$s</strong> addressed some security issues.', 1 ), '4.1.4' ); ?>
|
||||
<?php printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.1.4' ); ?>
|
||||
</p>
|
||||
<p><?php printf( _n( '<strong>Version %1$s</strong> addressed %2$s bug.',
|
||||
'<strong>Version %1$s</strong> addressed %2$s bugs.', 1 ), '4.1.3', number_format_i18n( 1 ) ); ?>
|
||||
<?php printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'http://codex.wordpress.org/Version_4.1.3' ); ?>
|
||||
<?php printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.1.3' ); ?>
|
||||
</p>
|
||||
<p><?php printf( _n( '<strong>Version %1$s</strong> addressed a security issue.',
|
||||
'<strong>Version %1$s</strong> addressed some security issues.', 8 ), '4.1.2' ); ?>
|
||||
<?php printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'http://codex.wordpress.org/Version_4.1.2' ); ?>
|
||||
<?php printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.1.2' ); ?>
|
||||
</p>
|
||||
<p><?php printf( _n( '<strong>Version %1$s</strong> addressed %2$s bug.',
|
||||
'<strong>Version %1$s</strong> addressed %2$s bugs.', 21 ), '4.1.1', number_format_i18n( 21 ) ); ?>
|
||||
<?php printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'http://codex.wordpress.org/Version_4.1.1' ); ?>
|
||||
<?php printf( __( 'For more information, see <a href="%s">the release notes</a>.' ), 'https://codex.wordpress.org/Version_4.1.1' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1048,6 +1048,9 @@ function update_core($from, $to) {
|
||||
$wp_filesystem->delete($old_file, true);
|
||||
}
|
||||
|
||||
// Remove any Genericons example.html's from the filesystem
|
||||
_upgrade_422_remove_genericons();
|
||||
|
||||
// Upgrade DB with separate request
|
||||
/** This filter is documented in wp-admin/includes/update-core.php */
|
||||
apply_filters( 'update_feedback', __( 'Upgrading database…' ) );
|
||||
@@ -1186,3 +1189,67 @@ window.location = 'about.php?updated';
|
||||
exit();
|
||||
}
|
||||
add_action( '_core_updated_successfully', '_redirect_to_about_wordpress' );
|
||||
|
||||
/**
|
||||
* Cleans up Genericons example files.
|
||||
*
|
||||
* @since 4.2.2
|
||||
*/
|
||||
function _upgrade_422_remove_genericons() {
|
||||
global $wp_theme_directories, $wp_filesystem;
|
||||
|
||||
// A list of the affected files using the filesystem absolute paths.
|
||||
$affected_files = array();
|
||||
|
||||
// Themes
|
||||
foreach ( $wp_theme_directories as $directory ) {
|
||||
$affected_theme_files = _upgrade_422_find_genericons_files_in_folder( $directory );
|
||||
$affected_files = array_merge( $affected_files, $affected_theme_files );
|
||||
}
|
||||
|
||||
// Plugins
|
||||
$affected_plugin_files = _upgrade_422_find_genericons_files_in_folder( WP_PLUGIN_DIR );
|
||||
$affected_files = array_merge( $affected_files, $affected_plugin_files );
|
||||
|
||||
foreach ( $affected_files as $file ) {
|
||||
$gen_dir = $wp_filesystem->find_folder( trailingslashit( dirname( $file ) ) );
|
||||
if ( empty( $gen_dir ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// The path when the file is accessed via WP_Filesystem may differ in the case of FTP
|
||||
$remote_file = $gen_dir . basename( $file );
|
||||
|
||||
if ( ! $wp_filesystem->exists( $remote_file ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( ! $wp_filesystem->delete( $remote_file, false, 'f' ) ) {
|
||||
$wp_filesystem->put_contents( $remote_file, '' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively find Genericons example files in a given folder.
|
||||
*
|
||||
* @ignore
|
||||
* @since 4.2.2
|
||||
*
|
||||
* @param string $directory Directory path. Expects trailingslashed.
|
||||
* @return array
|
||||
*/
|
||||
function _upgrade_422_find_genericons_files_in_folder( $directory ) {
|
||||
$directory = trailingslashit( $directory );
|
||||
$files = array();
|
||||
|
||||
if ( file_exists( "{$directory}example.html" ) && false !== strpos( file_get_contents( "{$directory}example.html" ), '<title>Genericons</title>' ) ) {
|
||||
$files[] = "{$directory}example.html";
|
||||
}
|
||||
|
||||
foreach ( glob( $directory . '*', GLOB_ONLYDIR ) as $dir ) {
|
||||
$files = array_merge( $files, _upgrade_422_find_genericons_files_in_folder( $dir ) );
|
||||
}
|
||||
|
||||
return $files;
|
||||
}
|
||||
|
||||
@@ -442,6 +442,9 @@ function upgrade_all() {
|
||||
if ( $wp_current_db_version < 29630 )
|
||||
upgrade_400();
|
||||
|
||||
if ( $wp_current_db_version < 30135 )
|
||||
upgrade_415();
|
||||
|
||||
maybe_disable_link_manager();
|
||||
|
||||
maybe_disable_automattic_widgets();
|
||||
@@ -1328,6 +1331,62 @@ function upgrade_400() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute changes made in WordPress 4.1.4.
|
||||
*
|
||||
* @since 4.1.4
|
||||
*/
|
||||
function upgrade_414() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute changes made in WordPress 4.1.5.
|
||||
*
|
||||
* @since 4.1.5
|
||||
*/
|
||||
function upgrade_415() {
|
||||
global $wp_current_db_version, $wpdb;
|
||||
|
||||
if ( $wp_current_db_version < 30135 ) {
|
||||
$content_length = $wpdb->get_col_length( $wpdb->comments, 'comment_content' );
|
||||
|
||||
if ( is_wp_error( $content_length ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( false === $content_length ) {
|
||||
$content_length = array(
|
||||
'type' => 'byte',
|
||||
'length' => 65535,
|
||||
);
|
||||
} elseif ( ! is_array( $content_length ) ) {
|
||||
$length = (int) $content_length > 0 ? (int) $content_length : 65535;
|
||||
$content_length = array(
|
||||
'type' => 'byte',
|
||||
'length' => $length
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'byte' !== $content_length['type'] || 0 === $content_length['length'] ) {
|
||||
// Sites with malformed DB schemas are on their own.
|
||||
return;
|
||||
}
|
||||
|
||||
$allowed_length = intval( $content_length['length'] ) - 10;
|
||||
|
||||
$comments = $wpdb->get_results(
|
||||
"SELECT `comment_ID` FROM `{$wpdb->comments}`
|
||||
WHERE `comment_date_gmt` > '2015-04-26'
|
||||
AND LENGTH( `comment_content` ) >= {$allowed_length}
|
||||
AND ( `comment_content` LIKE '%<%' OR `comment_content` LIKE '%>%' )"
|
||||
);
|
||||
|
||||
foreach ( $comments as $comment ) {
|
||||
wp_delete_comment( $comment->comment_ID, true );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute network level changes
|
||||
*
|
||||
|
||||
@@ -1,719 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Genericons</title>
|
||||
<link rel="stylesheet" href="genericons.css">
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
/**
|
||||
* Example page CSS
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
color: #2f2d2c;
|
||||
background: #fff;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2f2d2c;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#iconlist {
|
||||
clear: both;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#iconlist div {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#iconlist div:before {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#iconlist div:hover {
|
||||
cursor: pointer;
|
||||
color: #e4c05c;
|
||||
}
|
||||
|
||||
#primary {
|
||||
background: #e4c05c;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
max-width: 980px;
|
||||
padding: 0 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#icons {
|
||||
background: #fbfbfb;
|
||||
}
|
||||
|
||||
#icons #iconlist {
|
||||
max-width: 980px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
padding: 20px 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#glyph {
|
||||
float: left;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
-ms-box-sizing:border-box;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
#glyph .info {
|
||||
float: right;
|
||||
width: 180px;
|
||||
padding: 36px 0 0 0;
|
||||
}
|
||||
|
||||
#glyph .info a {
|
||||
color: #2f2d2c;
|
||||
display: block;
|
||||
padding: 8px 0 8px 15px;
|
||||
}
|
||||
|
||||
#glyph .info strong {
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#glyph .genericon {
|
||||
font-size: 256px;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
overflow: visible;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 50px;
|
||||
width: 48%;
|
||||
float: right;
|
||||
padding-left: 40px;
|
||||
margin-left: 2%;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
-ms-box-sizing:border-box;
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
|
||||
#primary h2 {
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 22px 0 0 20px;
|
||||
max-width: 980px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#primary h2 span {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
#footer {
|
||||
clear: both;
|
||||
max-width: 980px;
|
||||
margin: 80px auto;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
font-size: 7pt;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #ccc;
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
opacity: .3;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTUwcHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMTAgMCAxNTAgMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTAgMCAxNTAgMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTY1LjQzOCwxMi41Yy0zLjYyNiwwLTUuOTc2LTIuNjEyLTUuOTc2LTUuMzMxVjYuODMxYzAtMi43NjUsMi4zNTEtNS4zMyw1Ljk3Ni01LjMzDQoJCWMzLjY0MSwwLDUuOTksMi41NjUsNS45OSw1LjMzdjAuMzM5QzcxLjQyOCw5Ljg4OCw2OS4wNzksMTIuNSw2NS40MzgsMTIuNXogTTY5LjQ5Miw2Ljg2MWMwLTEuOTgtMS40NDQtMy43NDgtNC4wNTUtMy43NDgNCgkJcy00LjA0LDEuNzY4LTQuMDQsMy43NDh2MC4yNDZjMCwxLjk4MSwxLjQyOSwzLjc3OSw0LjA0LDMuNzc5czQuMDU1LTEuNzk4LDQuMDU1LTMuNzc5VjYuODYxeiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik0yNC40OTgsMTIuMWwtMS4zNTItMi41MzVoLTYuMDA3TDE1LjgzNCwxMi4xaC0yLjAyOGw1LjUzMS0xMC4yM2gxLjU5N2w1LjYyMiwxMC4yM0gyNC40OThMMjQuNDk4LDEyLjF6DQoJCSBNMjAuMDksMy44NjZsLTIuMjI4LDQuMzAxaDQuNTMxTDIwLjA5LDMuODY2eiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik0zNS4yODEsMTIuNWMtMy42NzEsMC01LjM3Ni0xLjk5Ni01LjM3Ni00LjY1NFYxLjg3aDEuOTA0djYuMDA2YzAsMS44OTEsMS4yNDUsMy4wMTMsMy42MSwzLjAxMw0KCQljMi40MjgsMCwzLjQyNi0xLjEyMiwzLjQyNi0zLjAxM1YxLjg3aDEuOTJ2NS45NzZDNDAuNzY3LDEwLjM4LDM5LjEzOCwxMi41LDM1LjI4MSwxMi41eiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik01MS40NTgsMy40NjdWMTIuMWgtMS45MTlWMy40NjdoLTQuNDcxVjEuODdoMTAuODZ2MS41OThMNTEuNDU4LDMuNDY3TDUxLjQ1OCwzLjQ2N3oiLz4NCgk8cGF0aCBmaWxsPSIjNDQ0NDQ0IiBkPSJNODguNTQzLDEyLjFWNC4wMDRsLTAuNTA5LDAuODkxTDgzLjc0OSwxMi4xaC0wLjkzN2wtNC4yNC03LjIwNWwtMC41MDYtMC44OTFWMTIuMWgtMS44NzVWMS44N2gyLjY1OA0KCQlsNC4wNCw3LjAyMWwwLjQ3NiwwLjg2bDAuNDc3LTAuODZsMy45OTQtNy4wMjFoMi42MjdWMTIuMUg4OC41NDNMODguNTQzLDEyLjF6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTEwNC45NzgsMTIuMWwtMS4zNTItMi41MzVoLTYuMDA4TDk2LjMxMywxMi4xaC0yLjAyOGw1LjUzMS0xMC4yMzFoMS41OTlsNS42MjIsMTAuMjMxSDEwNC45Nzh6DQoJCSBNMTAwLjU3LDMuODY2bC0yLjIyOCw0LjMwMWg0LjUyOUwxMDAuNTcsMy44NjZ6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTExNC43NzgsMy40NjdWMTIuMWgtMS45MlYzLjQ2N2gtNC40N1YxLjg3aDEwLjg2djEuNTk4TDExNC43NzgsMy40NjdMMTE0Ljc3OCwzLjQ2N3oiLz4NCgk8cGF0aCBmaWxsPSIjNDQ0NDQ0IiBkPSJNMTI4Ljg2NiwzLjQ2N1YxMi4xaC0xLjkxOVYzLjQ2N2gtNC40NzJWMS44N2gxMC44NnYxLjU5OEwxMjguODY2LDMuNDY3TDEyOC44NjYsMy40Njd6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTEzOC4wNjcsMTIuMVYyLjgzN2MwLjc2OSwwLDEuMDc2LTAuNDE1LDEuMDc2LTAuOTY4aDAuODE0VjEyLjFIMTM4LjA2N0wxMzguMDY3LDEyLjF6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTE1NC45OTYsNC43NTdjLTAuOTIxLTAuODQ1LTIuMjc0LTEuNjQ0LTQuMTAyLTEuNjQ0Yy0yLjczMywwLTQuMjcsMS44NzUtNC4yNywzLjgyNXYwLjINCgkJYzAsMS45MzcsMS41NTEsMy43NDgsNC40MDgsMy43NDhjMS43MDUsMCwzLjExOC0wLjgxNCw0LjAwOS0xLjY0NGwxLjE1MiwxLjIxNWMtMS4xMjEsMS4xMDctMy4wMjYsMi4wNDMtNS4yODUsMi4wNDMNCgkJYy0zLjg3LDAtNi4yMjMtMi41MjEtNi4yMjMtNS4yODRWNi44NzdjMC0yLjc2NiwyLjU2Ni01LjM3Nyw2LjMxNC01LjM3N2MyLjE2NywwLDQuMTM2LDAuOTA2LDUuMTk0LDIuMDQzTDE1NC45OTYsNC43NTd6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTY2LjcwMiw1LjA2YzAuMzQ3LDAuMjI0LDAuNDQ0LDAuNjg3LDAuMjE5LDEuMDM3TDY1LjE2OSw4LjgxYy0wLjIyNSwwLjM0Ny0wLjY4OCwwLjQ0OC0xLjAzMywwLjIyOWwwLDANCgkJQzYzLjc5LDguODEyLDYzLjY5Miw4LjM1MSw2My45MTcsOGwxLjc1MS0yLjcxM0M2NS44OTMsNC45MzgsNjYuMzU1LDQuODM3LDY2LjcwMiw1LjA2TDY2LjcwMiw1LjA2eiIvPg0KPC9nPg0KPC9zdmc+DQo=');
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font: 14px/1.5 monospace;
|
||||
}
|
||||
|
||||
.code {
|
||||
display: block;
|
||||
font: 14px/1.5 monospace;
|
||||
width: 600px;
|
||||
white-space: pre;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
#iconlist .new, #iconlist .update {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#iconlist .new:after, #iconlist .update:after {
|
||||
color: #e4c05c;
|
||||
display: block;
|
||||
content: "NEW";
|
||||
font: bold 8px/1 sans-serif;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#iconlist .update:after {
|
||||
content: "UPDATE";
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
body.searching #iconlist span.update:after, body.searching #iconlist span.new:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search {
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
font: 11pt sans-serif;
|
||||
padding: 10px;
|
||||
top: 20px;
|
||||
background: rgba(255,255,255,.8);
|
||||
}
|
||||
|
||||
#search:focus {
|
||||
background: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.genericon-404 {
|
||||
display: none !important; /* This is an easter egg */
|
||||
}
|
||||
|
||||
.genericon:after {
|
||||
content: attr(alt);
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hideUACs.genericon:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and ( max-width: 900px ) {
|
||||
|
||||
#glyph {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#glyph .info {
|
||||
width: 30%;
|
||||
}
|
||||
#glyph .genericon {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.description {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
background: none;
|
||||
padding-left: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* Example page JS
|
||||
*/
|
||||
|
||||
function copyToClipboard ( text, copyMode ) {
|
||||
if ( copyMode == "css" ) {
|
||||
window.prompt( "Copy this, then paste in your CSS :before selector.", text );
|
||||
} else if ( copyMode == "html" ) {
|
||||
window.prompt( "Copy this, then paste in your HTML.", text );
|
||||
} else {
|
||||
window.prompt( "Copy this, then paste in your Photoshop textfield.", text );
|
||||
}
|
||||
}
|
||||
|
||||
function pickRandomIcon() {
|
||||
var divs = jQuery("#iconlist div").get().sort(function(){
|
||||
return Math.round(Math.random())-0.5;
|
||||
}).slice(0,1);
|
||||
|
||||
attr = jQuery(divs).attr('alt');
|
||||
cssclass = jQuery(divs).attr('class');
|
||||
displayGlyph( attr, cssclass );
|
||||
|
||||
}
|
||||
|
||||
function displayGlyph( attr, cssclass ) {
|
||||
|
||||
// set permalink
|
||||
var permalink = cssclass.split(' genericon-')[1];
|
||||
window.location.hash = permalink;
|
||||
|
||||
// css copy string
|
||||
csstext = "content: \'\\" + attr + "';";
|
||||
|
||||
// html copy string
|
||||
htmltext = '<span class="' + cssclass + '"></span>';
|
||||
|
||||
// glyph copy string
|
||||
glyphtemp = "&#x" + attr + ";";
|
||||
jQuery('#temp').html( glyphtemp );
|
||||
glyphtext = jQuery('#temp').text();
|
||||
|
||||
// final output
|
||||
output = '<div class="' + cssclass + '"></div>'
|
||||
+ '<div class="info">'
|
||||
+ '<strong>← ' + cssclass.split( ' ' )[1] + '</strong>'
|
||||
+ '<a href="javascript:copyToClipboard(csstext, \'css\')">Copy CSS</a>'
|
||||
+ '<a href="javascript:copyToClipboard(htmltext, \'html\')">Copy HTML</a>'
|
||||
+ '<a href="javascript:copyToClipboard(glyphtext)">Copy Glyph</a>'
|
||||
+ '</div>';
|
||||
|
||||
jQuery( '#glyph' ).html( output );
|
||||
|
||||
}
|
||||
|
||||
function sortUnicode ( a, b ) {
|
||||
var numberA = jQuery(a).attr('alt').replace('f', '');
|
||||
var numberB = jQuery(b).attr('alt').replace('f', '');
|
||||
var contentA =parseInt( numberA, 16 );
|
||||
var contentB =parseInt( numberB, 16 );
|
||||
return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
|
||||
}
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
// pick random icon if no permalink, otherwise go to permalink
|
||||
if ( window.location.hash ) {
|
||||
permalink = "genericon-" + window.location.hash.split('#')[1];
|
||||
attr = jQuery( '.' + permalink ).attr( 'alt' );
|
||||
cssclass = jQuery( '.' + permalink ).attr('class');
|
||||
displayGlyph( attr, cssclass );
|
||||
} else {
|
||||
pickRandomIcon();
|
||||
}
|
||||
|
||||
jQuery( '#iconlist div' ).click(function() {
|
||||
|
||||
attr = jQuery( this ).attr( 'alt' );
|
||||
cssclass = jQuery( this ).attr( 'class' );
|
||||
|
||||
displayGlyph( attr, cssclass );
|
||||
|
||||
});
|
||||
|
||||
var $rows = jQuery('#iconlist div');
|
||||
jQuery('#search').keyup(function() {
|
||||
|
||||
// remove update text when using search
|
||||
jQuery('body').addClass('searching');
|
||||
|
||||
var val = jQuery.trim(jQuery(this).val()).replace(/ +/g, ' ').toLowerCase();
|
||||
|
||||
$rows.show().filter(function() {
|
||||
var text = jQuery(this).text().replace(/\s+/g, ' ').toLowerCase();
|
||||
return !~text.indexOf(val);
|
||||
}).hide();
|
||||
});
|
||||
|
||||
jQuery('input#search').focus();
|
||||
|
||||
// sort based on number
|
||||
jQuery('#iconlist div').sort( sortUnicode ).appendTo('#iconlist');
|
||||
|
||||
});
|
||||
|
||||
function toggleUACs() {
|
||||
jQuery('.genericon').toggleClass('hideUACs');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div id="primary">
|
||||
<div id="content">
|
||||
|
||||
<h2>Genericons <span>— A free, GPL, flexible icon font for blogs!</span></h2>
|
||||
|
||||
<input placeholder="Filter..." name="search" id="search" type="text" value="" maxlength="150" />
|
||||
|
||||
<div id="glyph">
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>Genericons are vector icons embedded in a webfont designed to be clean and simple keeping with a generic aesthetic. Use for instant HiDPI or to easily change colors on the fly.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="icons">
|
||||
<div id="iconlist">
|
||||
|
||||
<!-- note, the text inside the HTML elements is purely for the seach -->
|
||||
|
||||
<div alt="f423" class="genericon genericon-404" title="genericon-404">404</div>
|
||||
|
||||
<div alt="f508" class="genericon genericon-activity" title="genericon-activity">activity</div>
|
||||
|
||||
<div alt="f509" class="genericon genericon-anchor" title="genericon-anchor">anchor</div>
|
||||
|
||||
<div alt="f101" class="genericon genericon-aside" title="genericon-aside">aside</div>
|
||||
|
||||
<div alt="f416" class="genericon genericon-attachment" title="genericon-attachment">attachment</div>
|
||||
|
||||
<div alt="f109" class="genericon genericon-audio" title="genericon-audio">audio</div>
|
||||
|
||||
<div alt="f471" class="genericon genericon-bold" title="genericon-bold">bold</div>
|
||||
|
||||
<div alt="f444" class="genericon genericon-book" title="genericon-book">book</div>
|
||||
|
||||
<div alt="f50a" class="genericon genericon-bug" title="genericon-bug">bug</div>
|
||||
|
||||
<div alt="f447" class="genericon genericon-cart" title="genericon-cart">cart</div>
|
||||
|
||||
<div alt="f301" class="genericon genericon-category" title="genericon-category">category</div>
|
||||
|
||||
<div alt="f108" class="genericon genericon-chat" title="genericon-chat">chat</div>
|
||||
|
||||
<div alt="f418" class="genericon genericon-checkmark" title="genericon-checkmark">checkmark</div>
|
||||
|
||||
<div alt="f405" class="genericon genericon-close" title="genericon-close">close</div>
|
||||
|
||||
<div alt="f406" class="genericon genericon-close-alt" title="genericon-close-alt">close-alt</div>
|
||||
|
||||
<div alt="f426" class="genericon genericon-cloud" title="genericon-cloud">cloud</div>
|
||||
|
||||
<div alt="f440" class="genericon genericon-cloud-download" title="genericon-cloud-download">cloud-download</div>
|
||||
|
||||
<div alt="f441" class="genericon genericon-cloud-upload" title="genericon-cloud-upload">cloud-upload</div>
|
||||
|
||||
<div alt="f462" class="genericon genericon-code" title="genericon-code">code</div>
|
||||
|
||||
<div alt="f216" class="genericon genericon-codepen" title="genericon-codepen">codepen</div>
|
||||
|
||||
<div alt="f445" class="genericon genericon-cog" title="genericon-cog">cog</div>
|
||||
|
||||
<div alt="f432" class="genericon genericon-collapse" title="genericon-collapse">collapse</div>
|
||||
|
||||
<div alt="f300" class="genericon genericon-comment" title="genericon-comment">comment</div>
|
||||
|
||||
<div alt="f305" class="genericon genericon-day" title="genericon-day">day</div>
|
||||
|
||||
<div alt="f221" class="genericon genericon-digg" title="genericon-digg">digg</div>
|
||||
|
||||
<div alt="f443" class="genericon genericon-document" title="genericon-document">document</div>
|
||||
|
||||
<div alt="f428" class="genericon genericon-dot" title="genericon-dot">dot</div>
|
||||
|
||||
<div alt="f502" class="genericon genericon-downarrow" title="genericon-downarrow">downarrow</div>
|
||||
|
||||
<div alt="f50b" class="genericon genericon-download" title="genericon-download">download</div>
|
||||
|
||||
<div alt="f436" class="genericon genericon-draggable" title="genericon-draggable">draggable</div>
|
||||
|
||||
<div alt="f201" class="genericon genericon-dribbble" title="genericon-dribbble">dribbble</div>
|
||||
|
||||
<div alt="f225" class="genericon genericon-dropbox" title="genericon-dropbox">dropbox</div>
|
||||
|
||||
<div alt="f433" class="genericon genericon-dropdown" title="genericon-dropdown">dropdown</div>
|
||||
|
||||
<div alt="f434" class="genericon genericon-dropdown-left" title="genericon-dropdown-left">dropdown-left</div>
|
||||
|
||||
<div alt="f411" class="genericon genericon-edit" title="genericon-edit">edit</div>
|
||||
|
||||
<div alt="f476" class="genericon genericon-ellipsis" title="genericon-ellipsis">ellipsis</div>
|
||||
|
||||
<div alt="f431" class="genericon genericon-expand" title="genericon-expand">expand</div>
|
||||
|
||||
<div alt="f442" class="genericon genericon-external" title="genericon-external">external</div>
|
||||
|
||||
<div alt="f203" class="genericon genericon-facebook" title="genericon-facebook">facebook</div>
|
||||
|
||||
<div alt="f204" class="genericon genericon-facebook-alt" title="genericon-facebook-alt">facebook-alt</div>
|
||||
|
||||
<div alt="f458" class="genericon genericon-fastforward" title="genericon-fastforward">fastforward</div>
|
||||
|
||||
<div alt="f413" class="genericon genericon-feed" title="genericon-feed">feed</div>
|
||||
|
||||
<div alt="f468" class="genericon genericon-flag" title="genericon-flag">flag</div>
|
||||
|
||||
<div alt="f211" class="genericon genericon-flickr" title="genericon-flickr">flickr</div>
|
||||
|
||||
<div alt="f226" class="genericon genericon-foursquare" title="genericon-foursquare">foursquare</div>
|
||||
|
||||
<div alt="f474" class="genericon genericon-fullscreen" title="genericon-fullscreen">fullscreen</div>
|
||||
|
||||
<div alt="f103" class="genericon genericon-gallery" title="genericon-gallery">gallery</div>
|
||||
|
||||
<div alt="f200" class="genericon genericon-github" title="genericon-github">github</div>
|
||||
|
||||
<div alt="f206" class="genericon genericon-googleplus" title="genericon-googleplus">googleplus</div>
|
||||
|
||||
<div alt="f218" class="genericon genericon-googleplus-alt" title="genericon-googleplus-alt">googleplus-alt</div>
|
||||
|
||||
<div alt="f50c" class="genericon genericon-handset" title="genericon-handset">handset</div>
|
||||
|
||||
<div alt="f461" class="genericon genericon-heart" title="genericon-heart">heart</div>
|
||||
|
||||
<div alt="f457" class="genericon genericon-help" title="genericon-help">help</div>
|
||||
|
||||
<div alt="f404" class="genericon genericon-hide" title="genericon-hide">hide</div>
|
||||
|
||||
<div alt="f505" class="genericon genericon-hierarchy" title="genericon-hierarchy">hierarchy</div>
|
||||
|
||||
<div alt="f409" class="genericon genericon-home" title="genericon-home">home</div>
|
||||
|
||||
<div alt="f102" class="genericon genericon-image" title="genericon-image">image</div>
|
||||
|
||||
<div alt="f455" class="genericon genericon-info" title="genericon-info">info</div>
|
||||
|
||||
<div alt="f215" class="genericon genericon-instagram" title="genericon-instagram">instagram</div>
|
||||
|
||||
<div alt="f472" class="genericon genericon-italic" title="genericon-italic">italic</div>
|
||||
|
||||
<div alt="f427" class="genericon genericon-key" title="genericon-key">key</div>
|
||||
|
||||
<div alt="f503" class="genericon genericon-leftarrow" title="genericon-leftarrow">leftarrow</div>
|
||||
|
||||
<div alt="f107" class="genericon genericon-link" title="genericon-link">link</div>
|
||||
|
||||
<div alt="f207" class="genericon genericon-linkedin" title="genericon-linkedin">linkedin</div>
|
||||
|
||||
<div alt="f208" class="genericon genericon-linkedin-alt" title="genericon-linkedin-alt">linkedin-alt</div>
|
||||
|
||||
<div alt="f417" class="genericon genericon-location" title="genericon-location">location</div>
|
||||
|
||||
<div alt="f470" class="genericon genericon-lock" title="genericon-lock">lock</div>
|
||||
|
||||
<div alt="f410" class="genericon genericon-mail" title="genericon-mail">mail</div>
|
||||
|
||||
<div alt="f422" class="genericon genericon-maximize" title="genericon-maximize">maximize</div>
|
||||
|
||||
<div alt="f419" class="genericon genericon-menu" title="genericon-menu">menu</div>
|
||||
|
||||
<div alt="f50d" class="genericon genericon-microphone" title="genericon-microphone">microphone</div>
|
||||
|
||||
<div alt="f421" class="genericon genericon-minimize" title="genericon-minimize">minimize</div>
|
||||
|
||||
<div alt="f50e" class="genericon genericon-minus" title="genericon-minus">minus</div>
|
||||
|
||||
<div alt="f307" class="genericon genericon-month" title="genericon-month">month</div>
|
||||
|
||||
<div alt="f50f" class="genericon genericon-move" title="genericon-move">move</div>
|
||||
|
||||
<div alt="f429" class="genericon genericon-next" title="genericon-next">next</div>
|
||||
|
||||
<div alt="f456" class="genericon genericon-notice" title="genericon-notice">notice</div>
|
||||
|
||||
<div alt="f506" class="genericon genericon-paintbrush" title="genericon-paintbrush">paintbrush</div>
|
||||
|
||||
<div alt="f219" class="genericon genericon-path" title="genericon-path">path</div>
|
||||
|
||||
<div alt="f448" class="genericon genericon-pause" title="genericon-pause">pause</div>
|
||||
|
||||
<div alt="f437" class="genericon genericon-phone" title="genericon-phone">phone</div>
|
||||
|
||||
<div alt="f473" class="genericon genericon-picture" title="genericon-picture">picture</div>
|
||||
|
||||
<div alt="f308" class="genericon genericon-pinned" title="genericon-pinned">pinned</div>
|
||||
|
||||
<div alt="f209" class="genericon genericon-pinterest" title="genericon-pinterest">pinterest</div>
|
||||
|
||||
<div alt="f210" class="genericon genericon-pinterest-alt" title="genericon-pinterest-alt">pinterest-alt</div>
|
||||
|
||||
<div alt="f452" class="genericon genericon-play" title="genericon-play">play</div>
|
||||
|
||||
<div alt="f439" class="genericon genericon-plugin" title="genericon-plugin">plugin</div>
|
||||
|
||||
<div alt="f510" class="genericon genericon-plus" title="genericon-plus">plus</div>
|
||||
|
||||
<div alt="f224" class="genericon genericon-pocket" title="genericon-pocket">pocket</div>
|
||||
|
||||
<div alt="f217" class="genericon genericon-polldaddy" title="genericon-polldaddy">polldaddy</div>
|
||||
|
||||
<div alt="f460" class="genericon genericon-portfolio" title="genericon-portfolio">portfolio</div>
|
||||
|
||||
<div alt="f430" class="genericon genericon-previous" title="genericon-previous">previous</div>
|
||||
|
||||
<div alt="f469" class="genericon genericon-print" title="genericon-print">print</div>
|
||||
|
||||
<div alt="f106" class="genericon genericon-quote" title="genericon-quote">quote</div>
|
||||
|
||||
<div alt="f511" class="genericon genericon-rating-empty" title="genericon-rating-empty">rating-empty</div>
|
||||
|
||||
<div alt="f512" class="genericon genericon-rating-full" title="genericon-rating-full">rating-full</div>
|
||||
|
||||
<div alt="f513" class="genericon genericon-rating-half" title="genericon-rating-half">rating-half</div>
|
||||
|
||||
<div alt="f222" class="genericon genericon-reddit" title="genericon-reddit">reddit</div>
|
||||
|
||||
<div alt="f420" class="genericon genericon-refresh" title="genericon-refresh">refresh</div>
|
||||
|
||||
<div alt="f412" class="genericon genericon-reply" title="genericon-reply">reply</div>
|
||||
|
||||
<div alt="f466" class="genericon genericon-reply-alt" title="genericon-reply-alt">reply-alt</div>
|
||||
|
||||
<div alt="f467" class="genericon genericon-reply-single" title="genericon-reply-single">reply-single</div>
|
||||
|
||||
<div alt="f459" class="genericon genericon-rewind" title="genericon-rewind">rewind</div>
|
||||
|
||||
<div alt="f501" class="genericon genericon-rightarrow" title="genericon-rightarrow">rightarrow</div>
|
||||
|
||||
<div alt="f400" class="genericon genericon-search" title="genericon-search">search</div>
|
||||
|
||||
<div alt="f438" class="genericon genericon-send-to-phone" title="genericon-send-to-phone">send-to-phone</div>
|
||||
|
||||
<div alt="f454" class="genericon genericon-send-to-tablet" title="genericon-send-to-tablet">send-to-tablet</div>
|
||||
|
||||
<div alt="f415" class="genericon genericon-share" title="genericon-share">share</div>
|
||||
|
||||
<div alt="f403" class="genericon genericon-show" title="genericon-show">show</div>
|
||||
|
||||
<div alt="f514" class="genericon genericon-shuffle" title="genericon-shuffle">shuffle</div>
|
||||
|
||||
<div alt="f507" class="genericon genericon-sitemap" title="genericon-sitemap">sitemap</div>
|
||||
|
||||
<div alt="f451" class="genericon genericon-skip-ahead" title="genericon-skip-ahead">skip-ahead</div>
|
||||
|
||||
<div alt="f450" class="genericon genericon-skip-back" title="genericon-skip-back">skip-back</div>
|
||||
|
||||
<div alt="f220" class="genericon genericon-skype" title="genericon-skype">skype</div>
|
||||
|
||||
<div alt="f424" class="genericon genericon-spam" title="genericon-spam">spam</div>
|
||||
|
||||
<div alt="f515" class="genericon genericon-spotify" title="genericon-spotify">spotify</div>
|
||||
|
||||
<div alt="f100" class="genericon genericon-standard" title="genericon-standard">standard</div>
|
||||
|
||||
<div alt="f408" class="genericon genericon-star" title="genericon-star">star</div>
|
||||
|
||||
<div alt="f105" class="genericon genericon-status" title="genericon-status">status</div>
|
||||
|
||||
<div alt="f449" class="genericon genericon-stop" title="genericon-stop">stop</div>
|
||||
|
||||
<div alt="f223" class="genericon genericon-stumbleupon" title="genericon-stumbleupon">stumbleupon</div>
|
||||
|
||||
<div alt="f463" class="genericon genericon-subscribe" title="genericon-subscribe">subscribe</div>
|
||||
|
||||
<div alt="f465" class="genericon genericon-subscribed" title="genericon-subscribed">subscribed</div>
|
||||
|
||||
<div alt="f425" class="genericon genericon-summary" title="genericon-summary">summary</div>
|
||||
|
||||
<div alt="f453" class="genericon genericon-tablet" title="genericon-tablet">tablet</div>
|
||||
|
||||
<div alt="f302" class="genericon genericon-tag" title="genericon-tag">tag</div>
|
||||
|
||||
<div alt="f303" class="genericon genericon-time" title="genericon-time">time</div>
|
||||
|
||||
<div alt="f435" class="genericon genericon-top" title="genericon-top">top</div>
|
||||
|
||||
<div alt="f407" class="genericon genericon-trash" title="genericon-trash">trash</div>
|
||||
|
||||
<div alt="f214" class="genericon genericon-tumblr" title="genericon-tumblr">tumblr</div>
|
||||
|
||||
<div alt="f516" class="genericon genericon-twitch" title="genericon-twitch">twitch</div>
|
||||
|
||||
<div alt="f202" class="genericon genericon-twitter" title="genericon-twitter">twitter</div>
|
||||
|
||||
<div alt="f446" class="genericon genericon-unapprove" title="genericon-unapprove">unapprove</div>
|
||||
|
||||
<div alt="f464" class="genericon genericon-unsubscribe" title="genericon-unsubscribe">unsubscribe</div>
|
||||
|
||||
<div alt="f401" class="genericon genericon-unzoom" title="genericon-unzoom">unzoom</div>
|
||||
|
||||
<div alt="f500" class="genericon genericon-uparrow" title="genericon-uparrow">uparrow</div>
|
||||
|
||||
<div alt="f304" class="genericon genericon-user" title="genericon-user">user</div>
|
||||
|
||||
<div alt="f104" class="genericon genericon-video" title="genericon-video">video</div>
|
||||
|
||||
<div alt="f517" class="genericon genericon-videocamera" title="genericon-videocamera">videocamera</div>
|
||||
|
||||
<div alt="f212" class="genericon genericon-vimeo" title="genericon-vimeo">vimeo</div>
|
||||
|
||||
<div alt="f414" class="genericon genericon-warning" title="genericon-warning">warning</div>
|
||||
|
||||
<div alt="f475" class="genericon genericon-website" title="genericon-website">website</div>
|
||||
|
||||
<div alt="f306" class="genericon genericon-week" title="genericon-week">week</div>
|
||||
|
||||
<div alt="f205" class="genericon genericon-wordpress" title="genericon-wordpress">wordpress</div>
|
||||
|
||||
<div alt="f504" class="genericon genericon-xpost" title="genericon-xpost">xpost</div>
|
||||
|
||||
<div alt="f213" class="genericon genericon-youtube" title="genericon-youtube">youtube</div>
|
||||
|
||||
<div alt="f402" class="genericon genericon-zoom" title="genericon-zoom">zoom</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="temp" style="display: none;"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
|
||||
<p>An <a href="http://automattic.com" rel="nofollow">Automattic</a> Portrayal</p>
|
||||
<p>No designers were harmed in the making of this icon font.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,464 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en">
|
||||
<head>
|
||||
<title>Genericons</title>
|
||||
<link rel="stylesheet" href="genericons.css">
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
width: 800px;
|
||||
margin: 50px auto;
|
||||
color: #777;
|
||||
background: white;
|
||||
}
|
||||
.icons {
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.icons div {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin: 0 30px 30px 0;
|
||||
}
|
||||
.icons:hover div {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.code {
|
||||
display: block;
|
||||
font: 14px/1.5 monospace;
|
||||
width: 740px;
|
||||
white-space: pre;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
color: #777;
|
||||
overflow: auto;
|
||||
}
|
||||
.my-icon:before {
|
||||
content: '\f408';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 32px/1 'Genericons';
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* For the Examples */
|
||||
.my-checklist {
|
||||
list-style-type: none;
|
||||
text-indent: -16px;
|
||||
}
|
||||
.my-checklist li:before {
|
||||
padding-right: 16px;
|
||||
content: '\f418';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 16px/1 'Genericons';
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.my-blockquote {
|
||||
background: #eee;
|
||||
border-left: 32px solid #ddd;
|
||||
padding: 10px;
|
||||
}
|
||||
.my-blockquote:before {
|
||||
margin-left: -42px;
|
||||
padding-right: 10px;
|
||||
content: '\f106';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 32px/20px 'Genericons';
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.my-button {
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
background: #e05d22; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #e05d22 0%, #d94412 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #e05d22 0%, #d94412 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #e05d22 0%, #d94412 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */
|
||||
display: inline-block;
|
||||
padding: 10px 16px 4px 16px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid #b93207;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.my-button:hover,
|
||||
.my-button:focus {
|
||||
background: #ed6a31; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */
|
||||
outline: none;
|
||||
}
|
||||
.my-button:active {
|
||||
background: #d94412; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #d94412 0%, #e05d22 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #d94412 0%, #e05d22 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #d94412 0%, #e05d22 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */
|
||||
border: none;
|
||||
border-top: 3px solid #b93207;
|
||||
padding: 6px 16px 7px 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="section">
|
||||
|
||||
<h1>Genericons Usage</h1>
|
||||
|
||||
<p>Copy the <strong>font</strong> folder and the <strong>genericons.css</strong> file together into your project. Link the CSS in your HTML:</p>
|
||||
|
||||
<p><code><link href="path/to/genericons.css" rel="stylesheet"></code></p>
|
||||
|
||||
<p>Drop in the following HTML with the name of the icon you want to display:</p>
|
||||
|
||||
<p><code><div class="genericon genericon-standard"></div></code></p>
|
||||
|
||||
<div class="icons">
|
||||
|
||||
<!-- post formats -->
|
||||
<div alt="f100" class="genericon genericon-standard"></div>
|
||||
<div alt="f101" class="genericon genericon-aside"></div>
|
||||
<div alt="f102" class="genericon genericon-image"></div>
|
||||
<div alt="f103" class="genericon genericon-gallery"></div>
|
||||
<div alt="f104" class="genericon genericon-video"></div>
|
||||
<div alt="f105" class="genericon genericon-status"></div>
|
||||
<div alt="f106" class="genericon genericon-quote"></div>
|
||||
<div alt="f107" class="genericon genericon-link"></div>
|
||||
<div alt="f108" class="genericon genericon-chat"></div>
|
||||
<div alt="f109" class="genericon genericon-audio"></div>
|
||||
|
||||
<!-- social icons -->
|
||||
<div alt="f200" class="genericon genericon-github"></div>
|
||||
<div alt="f201" class="genericon genericon-dribbble"></div>
|
||||
<div alt="f202" class="genericon genericon-twitter"></div>
|
||||
<div alt="f203" class="genericon genericon-facebook"></div>
|
||||
<div alt="f204" class="genericon genericon-facebook-alt"></div>
|
||||
<div alt="f205" class="genericon genericon-wordpress"></div>
|
||||
<div alt="f206" class="genericon genericon-googleplus"></div>
|
||||
<div alt="f207" class="genericon genericon-linkedin"></div>
|
||||
<div alt="f208" class="genericon genericon-linkedin-alt"></div>
|
||||
<div alt="f209" class="genericon genericon-pinterest"></div>
|
||||
<div alt="f210" class="genericon genericon-pinterest-alt"></div>
|
||||
<div alt="f211" class="genericon genericon-flickr"></div>
|
||||
<div alt="f212" class="genericon genericon-vimeo"></div>
|
||||
<div alt="f213" class="genericon genericon-youtube"></div>
|
||||
<div alt="f214" class="genericon genericon-tumblr"></div>
|
||||
<div alt="f215" class="genericon genericon-instagram"></div>
|
||||
<div alt="f216" class="genericon genericon-codepen"></div>
|
||||
<div alt="f217" class="genericon genericon-polldaddy"></div>
|
||||
<div alt="f218" class="genericon genericon-googleplus-alt"></div>
|
||||
<div alt="f219" class="genericon genericon-path"></div>
|
||||
<div alt="f220" class="genericon genericon-skype"></div>
|
||||
<div alt="f221" class="genericon genericon-digg"></div>
|
||||
<div alt="f222" class="genericon genericon-reddit"></div>
|
||||
<div alt="f223" class="genericon genericon-stumbleupon"></div>
|
||||
<div alt="f224" class="genericon genericon-pocket"></div>
|
||||
<div alt="f225" class="genericon genericon-dropbox"></div>
|
||||
|
||||
<!-- meta icons -->
|
||||
<div alt="f300" class="genericon genericon-comment"></div>
|
||||
<div alt="f301" class="genericon genericon-category"></div>
|
||||
<div alt="f302" class="genericon genericon-tag"></div>
|
||||
<div alt="f303" class="genericon genericon-time"></div>
|
||||
<div alt="f304" class="genericon genericon-user"></div>
|
||||
<div alt="f305" class="genericon genericon-day"></div>
|
||||
<div alt="f306" class="genericon genericon-week"></div>
|
||||
<div alt="f307" class="genericon genericon-month"></div>
|
||||
<div alt="f308" class="genericon genericon-pinned"></div>
|
||||
|
||||
<!-- other icons -->
|
||||
<div alt="f400" class="genericon genericon-search"></div>
|
||||
<div alt="f401" class="genericon genericon-unzoom"></div>
|
||||
<div alt="f402" class="genericon genericon-zoom"></div>
|
||||
<div alt="f403" class="genericon genericon-show"></div>
|
||||
<div alt="f404" class="genericon genericon-hide"></div>
|
||||
<div alt="f405" class="genericon genericon-close"></div>
|
||||
<div alt="f406" class="genericon genericon-close-alt"></div>
|
||||
<div alt="f407" class="genericon genericon-trash"></div>
|
||||
<div alt="f408" class="genericon genericon-star"></div>
|
||||
<div alt="f409" class="genericon genericon-home"></div>
|
||||
<div alt="f410" class="genericon genericon-mail"></div>
|
||||
<div alt="f411" class="genericon genericon-edit"></div>
|
||||
<div alt="f412" class="genericon genericon-reply"></div>
|
||||
<div alt="f413" class="genericon genericon-feed"></div>
|
||||
<div alt="f414" class="genericon genericon-warning"></div>
|
||||
<div alt="f415" class="genericon genericon-share"></div>
|
||||
<div alt="f416" class="genericon genericon-attachment"></div>
|
||||
<div alt="f417" class="genericon genericon-location"></div>
|
||||
<div alt="f418" class="genericon genericon-checkmark"></div>
|
||||
<div alt="f419" class="genericon genericon-menu"></div>
|
||||
<div alt="f420" class="genericon genericon-refresh"></div>
|
||||
<div alt="f421" class="genericon genericon-minimize"></div>
|
||||
<div alt="f422" class="genericon genericon-maximize"></div>
|
||||
<div alt="f423" class="genericon genericon-404"></div>
|
||||
<div alt="f424" class="genericon genericon-spam"></div>
|
||||
<div alt="f425" class="genericon genericon-summary"></div>
|
||||
<div alt="f426" class="genericon genericon-cloud"></div>
|
||||
<div alt="f427" class="genericon genericon-key"></div>
|
||||
<div alt="f428" class="genericon genericon-dot"></div>
|
||||
<div alt="f429" class="genericon genericon-next"></div>
|
||||
<div alt="f430" class="genericon genericon-previous"></div>
|
||||
<div alt="f431" class="genericon genericon-expand"></div>
|
||||
<div alt="f432" class="genericon genericon-collapse"></div>
|
||||
<div alt="f433" class="genericon genericon-dropdown"></div>
|
||||
<div alt="f434" class="genericon genericon-dropdown-left"></div>
|
||||
<div alt="f435" class="genericon genericon-top"></div>
|
||||
<div alt="f436" class="genericon genericon-draggable"></div>
|
||||
<div alt="f437" class="genericon genericon-phone"></div>
|
||||
<div alt="f438" class="genericon genericon-send-to-phone"></div>
|
||||
<div alt="f439" class="genericon genericon-plugin"></div>
|
||||
<div alt="f440" class="genericon genericon-cloud-download"></div>
|
||||
<div alt="f441" class="genericon genericon-cloud-upload"></div>
|
||||
<div alt="f442" class="genericon genericon-external"></div>
|
||||
<div alt="f443" class="genericon genericon-document"></div>
|
||||
<div alt="f444" class="genericon genericon-book"></div>
|
||||
<div alt="f445" class="genericon genericon-cog"></div>
|
||||
<div alt="f446" class="genericon genericon-unapprove"></div>
|
||||
<div alt="f447" class="genericon genericon-cart"></div>
|
||||
<div alt="f448" class="genericon genericon-pause"></div>
|
||||
<div alt="f449" class="genericon genericon-stop"></div>
|
||||
<div alt="f450" class="genericon genericon-skip-back"></div>
|
||||
<div alt="f451" class="genericon genericon-skip-ahead"></div>
|
||||
<div alt="f452" class="genericon genericon-play"></div>
|
||||
<div alt="f453" class="genericon genericon-tablet"></div>
|
||||
<div alt="f454" class="genericon genericon-send-to-tablet"></div>
|
||||
<div alt="f455" class="genericon genericon-info"></div>
|
||||
<div alt="f456" class="genericon genericon-notice"></div>
|
||||
<div alt="f457" class="genericon genericon-help"></div>
|
||||
<div alt="f458" class="genericon genericon-fastforward"></div>
|
||||
<div alt="f459" class="genericon genericon-rewind"></div>
|
||||
<div alt="f460" class="genericon genericon-portfolio"></div>
|
||||
<div alt="f461" class="genericon genericon-heart"></div>
|
||||
<div alt="f462" class="genericon genericon-code"></div>
|
||||
<div alt="f463" class="genericon genericon-subscribe"></div>
|
||||
<div alt="f464" class="genericon genericon-unsubscribe"></div>
|
||||
<div alt="f465" class="genericon genericon-subscribed"></div>
|
||||
<div alt="f466" class="genericon genericon-reply-alt"></div>
|
||||
<div alt="f467" class="genericon genericon-reply-single"></div>
|
||||
<div alt="f468" class="genericon genericon-flag"></div>
|
||||
<div alt="f469" class="genericon genericon-print"></div>
|
||||
<div alt="f470" class="genericon genericon-lock"></div>
|
||||
<div alt="f471" class="genericon genericon-bold"></div>
|
||||
<div alt="f472" class="genericon genericon-italic"></div>
|
||||
<div alt="f473" class="genericon genericon-picture"></div>
|
||||
<div alt="f474" class="genericon genericon-fullscreen"></div>
|
||||
|
||||
<!-- generic shapes -->
|
||||
<div alt="f500" class="genericon genericon-uparrow"></div>
|
||||
<div alt="f501" class="genericon genericon-rightarrow"></div>
|
||||
<div alt="f502" class="genericon genericon-downarrow"></div>
|
||||
<div alt="f503" class="genericon genericon-leftarrow"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<p>If you want to insert an icon manually using the <code>:before</code> selector, you can setup CSS rules like the following example. <strong>Make sure to set the size to a multiple of 16px</strong> or the icons could end up looking fuzzy:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 150px;" onclick="select();">.my-icon:before {
|
||||
content: '\f408';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 32px/1 'Genericons';
|
||||
vertical-align: middle;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Add a matching class to your HTML:</p>
|
||||
|
||||
<p><code><div class="my-icon">You're a Star!</div></code></p>
|
||||
|
||||
<p>Here's the result: <span class="my-icon">You're a Star!</span></p>
|
||||
|
||||
<h2>Examples</h2>
|
||||
|
||||
<p>Turn every icon a <span style="color: #fa8072;">Salmon</span> color:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 70px" onclick="select();">
|
||||
.genericon {
|
||||
color: #fa8072;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Or turn the stars <span style="color: #ffd700;">Gold</span>:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 70px" onclick="select();">
|
||||
.genericon-star {
|
||||
color: #fa8072;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Use icons for bulleted lists:</p>
|
||||
|
||||
<ul class="my-checklist">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
|
||||
<p><textarea class="code" style="min-height: 130px" onclick="select();">
|
||||
<ul class="my-checklist">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul></textarea></p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 260px;" onclick="select();">
|
||||
.my-checklist {
|
||||
list-style-type: none;
|
||||
text-indent: -16px;
|
||||
}
|
||||
.my-checklist li:before {
|
||||
padding-right: 16px;
|
||||
content: '\f418';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 16px/1 'Genericons';
|
||||
vertical-align: text-top;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Use icons to style blockquotes:</p>
|
||||
|
||||
<blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. —<em>Lewis Carroll</em></blockquote>
|
||||
<blockquote class="my-blockquote">`Twas brillig, and the slithy toves Did gyre and gimble in the wabe: All mimsy were the borogoves, And the mome raths outgrabe. "Beware the Jabberwock, my son! The jaws that bite, the claws that catch! Beware the Jubjub bird, and shun The frumious Bandersnatch!"</blockquote>
|
||||
|
||||
<p><textarea class="code" style="min-height: 40px;" onclick="select();"><blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. —<em>Lewis Carroll</em></blockquote></textarea></p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 300px;" onclick="select();">
|
||||
.my-blockquote {
|
||||
background: #eee;
|
||||
border-left: 32px solid #ddd;
|
||||
padding: 10px;
|
||||
}
|
||||
.my-blockquote:before {
|
||||
margin-left: -42px;
|
||||
padding-right: 10px;
|
||||
content: '\f106';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 32px/20px 'Genericons';
|
||||
vertical-align: bottom;
|
||||
} </textarea></p>
|
||||
|
||||
<p>Use icons to style buttons:</p>
|
||||
|
||||
<a class="my-button" href="javascript:void()"><i class="genericon genericon-show"></i> View</a>
|
||||
<a class="my-button" href="javascript:void()"><i class="genericon genericon-audio"></i> Listen</a>
|
||||
|
||||
<p><textarea class="code" style="min-height: 40px;" onclick="select();"><a class="my-button" href="#"><i class="genericon genericon-show"></i> View</a>
|
||||
<a class="my-button" href="#"><i class="genericon genericon-audio"></i> Listen</a></textarea></p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 300px;" onclick="select();">
|
||||
.my-button {
|
||||
font-family: Helvetica, sans-serif;
|
||||
background: #e05d22; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #e05d22 0%, #d94412 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #e05d22 0%, #d94412 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #e05d22 0%, #d94412 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */
|
||||
display: inline-block;
|
||||
padding: 10px 16px 6px 16px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid #b93207;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.my-button:hover,
|
||||
.my-button:focus {
|
||||
background: #ed6a31; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.my-button:active {
|
||||
background: #d94412; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #d94412 0%, #e05d22 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #d94412 0%, #e05d22 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #d94412 0%, #e05d22 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */
|
||||
border: none;
|
||||
border-top: 3px solid #b93207;
|
||||
padding: 6px 16px 10px 16px;
|
||||
}</textarea>/</p>
|
||||
|
||||
<h2>CSS Preprocessors</h2>
|
||||
|
||||
<p>Preprocessing extensions such as Sass (SCSS Syntax) or LESS</a> can make it easier to manage CSS for a lot of things at once using things like variables and mixins.</p>
|
||||
|
||||
<p>This example will seup the basic genericon rules and sets a color you can use for all icons using Sass:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 360px;" onclick="select();">$icon-color: "#fa8072";
|
||||
|
||||
.genericon {
|
||||
color: $icon-color;
|
||||
}
|
||||
|
||||
@mixin genericon-rules {
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 16px/1 'Genericons';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.my-icon:before {
|
||||
content: '\f408';
|
||||
@include genericon-rules;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Here is a similar example for LESS:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 360px;" onclick="select();">@icon-color: "#fa8072";
|
||||
|
||||
.genericon {
|
||||
color: @icon-color;
|
||||
}
|
||||
|
||||
.genericon-rules {
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 16px/1 'Genericons';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.my-icon:before {
|
||||
content: '\f408';
|
||||
.genericon-rules;
|
||||
}</textarea></p>
|
||||
|
||||
<h2>Fallback images for IE7 and below</h2>
|
||||
|
||||
<p>Genericons <strong>does not come with fallback icons by default</strong> -- therefore you have to create them yourself. If you are using HTML similar to this example:
|
||||
|
||||
<p><code><span class="genericon genericon-warning"></span></code></p>
|
||||
|
||||
<p>You can use the asterisk hack to serve a different icon to IE7 once you have saved the fallback icons to your project:</p>
|
||||
|
||||
<textarea class="code" style="min-height: 85px;" onclick="select();">.genericon-warning {
|
||||
*background: url(fallback-icon.png) no-repeat center center;
|
||||
*text-indent: 100%;
|
||||
}</textarea>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,464 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en">
|
||||
<head>
|
||||
<title>Genericons</title>
|
||||
<link rel="stylesheet" href="genericons.css">
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
width: 800px;
|
||||
margin: 50px auto;
|
||||
color: #777;
|
||||
background: white;
|
||||
}
|
||||
.icons {
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.icons div {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin: 0 30px 30px 0;
|
||||
}
|
||||
.icons:hover div {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.code {
|
||||
display: block;
|
||||
font: 14px/1.5 monospace;
|
||||
width: 740px;
|
||||
white-space: pre;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
color: #777;
|
||||
overflow: auto;
|
||||
}
|
||||
.my-icon:before {
|
||||
content: '\f408';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 32px/1 'Genericons';
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* For the Examples */
|
||||
.my-checklist {
|
||||
list-style-type: none;
|
||||
text-indent: -16px;
|
||||
}
|
||||
.my-checklist li:before {
|
||||
padding-right: 16px;
|
||||
content: '\f418';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 16px/1 'Genericons';
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.my-blockquote {
|
||||
background: #eee;
|
||||
border-left: 32px solid #ddd;
|
||||
padding: 10px;
|
||||
}
|
||||
.my-blockquote:before {
|
||||
margin-left: -42px;
|
||||
padding-right: 10px;
|
||||
content: '\f106';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 32px/20px 'Genericons';
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.my-button {
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
background: #e05d22; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #e05d22 0%, #d94412 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #e05d22 0%, #d94412 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #e05d22 0%, #d94412 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */
|
||||
display: inline-block;
|
||||
padding: 10px 16px 4px 16px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid #b93207;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.my-button:hover,
|
||||
.my-button:focus {
|
||||
background: #ed6a31; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */
|
||||
outline: none;
|
||||
}
|
||||
.my-button:active {
|
||||
background: #d94412; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #d94412 0%, #e05d22 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #d94412 0%, #e05d22 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #d94412 0%, #e05d22 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */
|
||||
border: none;
|
||||
border-top: 3px solid #b93207;
|
||||
padding: 6px 16px 7px 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="section">
|
||||
|
||||
<h1>Genericons Usage</h1>
|
||||
|
||||
<p>Copy the <strong>font</strong> folder and the <strong>genericons.css</strong> file together into your project. Link the CSS in your HTML:</p>
|
||||
|
||||
<p><code><link href="path/to/genericons.css" rel="stylesheet"></code></p>
|
||||
|
||||
<p>Drop in the following HTML with the name of the icon you want to display:</p>
|
||||
|
||||
<p><code><div class="genericon genericon-standard"></div></code></p>
|
||||
|
||||
<div class="icons">
|
||||
|
||||
<!-- post formats -->
|
||||
<div alt="f100" class="genericon genericon-standard"></div>
|
||||
<div alt="f101" class="genericon genericon-aside"></div>
|
||||
<div alt="f102" class="genericon genericon-image"></div>
|
||||
<div alt="f103" class="genericon genericon-gallery"></div>
|
||||
<div alt="f104" class="genericon genericon-video"></div>
|
||||
<div alt="f105" class="genericon genericon-status"></div>
|
||||
<div alt="f106" class="genericon genericon-quote"></div>
|
||||
<div alt="f107" class="genericon genericon-link"></div>
|
||||
<div alt="f108" class="genericon genericon-chat"></div>
|
||||
<div alt="f109" class="genericon genericon-audio"></div>
|
||||
|
||||
<!-- social icons -->
|
||||
<div alt="f200" class="genericon genericon-github"></div>
|
||||
<div alt="f201" class="genericon genericon-dribbble"></div>
|
||||
<div alt="f202" class="genericon genericon-twitter"></div>
|
||||
<div alt="f203" class="genericon genericon-facebook"></div>
|
||||
<div alt="f204" class="genericon genericon-facebook-alt"></div>
|
||||
<div alt="f205" class="genericon genericon-wordpress"></div>
|
||||
<div alt="f206" class="genericon genericon-googleplus"></div>
|
||||
<div alt="f207" class="genericon genericon-linkedin"></div>
|
||||
<div alt="f208" class="genericon genericon-linkedin-alt"></div>
|
||||
<div alt="f209" class="genericon genericon-pinterest"></div>
|
||||
<div alt="f210" class="genericon genericon-pinterest-alt"></div>
|
||||
<div alt="f211" class="genericon genericon-flickr"></div>
|
||||
<div alt="f212" class="genericon genericon-vimeo"></div>
|
||||
<div alt="f213" class="genericon genericon-youtube"></div>
|
||||
<div alt="f214" class="genericon genericon-tumblr"></div>
|
||||
<div alt="f215" class="genericon genericon-instagram"></div>
|
||||
<div alt="f216" class="genericon genericon-codepen"></div>
|
||||
<div alt="f217" class="genericon genericon-polldaddy"></div>
|
||||
<div alt="f218" class="genericon genericon-googleplus-alt"></div>
|
||||
<div alt="f219" class="genericon genericon-path"></div>
|
||||
<div alt="f220" class="genericon genericon-skype"></div>
|
||||
<div alt="f221" class="genericon genericon-digg"></div>
|
||||
<div alt="f222" class="genericon genericon-reddit"></div>
|
||||
<div alt="f223" class="genericon genericon-stumbleupon"></div>
|
||||
<div alt="f224" class="genericon genericon-pocket"></div>
|
||||
<div alt="f225" class="genericon genericon-dropbox"></div>
|
||||
|
||||
<!-- meta icons -->
|
||||
<div alt="f300" class="genericon genericon-comment"></div>
|
||||
<div alt="f301" class="genericon genericon-category"></div>
|
||||
<div alt="f302" class="genericon genericon-tag"></div>
|
||||
<div alt="f303" class="genericon genericon-time"></div>
|
||||
<div alt="f304" class="genericon genericon-user"></div>
|
||||
<div alt="f305" class="genericon genericon-day"></div>
|
||||
<div alt="f306" class="genericon genericon-week"></div>
|
||||
<div alt="f307" class="genericon genericon-month"></div>
|
||||
<div alt="f308" class="genericon genericon-pinned"></div>
|
||||
|
||||
<!-- other icons -->
|
||||
<div alt="f400" class="genericon genericon-search"></div>
|
||||
<div alt="f401" class="genericon genericon-unzoom"></div>
|
||||
<div alt="f402" class="genericon genericon-zoom"></div>
|
||||
<div alt="f403" class="genericon genericon-show"></div>
|
||||
<div alt="f404" class="genericon genericon-hide"></div>
|
||||
<div alt="f405" class="genericon genericon-close"></div>
|
||||
<div alt="f406" class="genericon genericon-close-alt"></div>
|
||||
<div alt="f407" class="genericon genericon-trash"></div>
|
||||
<div alt="f408" class="genericon genericon-star"></div>
|
||||
<div alt="f409" class="genericon genericon-home"></div>
|
||||
<div alt="f410" class="genericon genericon-mail"></div>
|
||||
<div alt="f411" class="genericon genericon-edit"></div>
|
||||
<div alt="f412" class="genericon genericon-reply"></div>
|
||||
<div alt="f413" class="genericon genericon-feed"></div>
|
||||
<div alt="f414" class="genericon genericon-warning"></div>
|
||||
<div alt="f415" class="genericon genericon-share"></div>
|
||||
<div alt="f416" class="genericon genericon-attachment"></div>
|
||||
<div alt="f417" class="genericon genericon-location"></div>
|
||||
<div alt="f418" class="genericon genericon-checkmark"></div>
|
||||
<div alt="f419" class="genericon genericon-menu"></div>
|
||||
<div alt="f420" class="genericon genericon-refresh"></div>
|
||||
<div alt="f421" class="genericon genericon-minimize"></div>
|
||||
<div alt="f422" class="genericon genericon-maximize"></div>
|
||||
<div alt="f423" class="genericon genericon-404"></div>
|
||||
<div alt="f424" class="genericon genericon-spam"></div>
|
||||
<div alt="f425" class="genericon genericon-summary"></div>
|
||||
<div alt="f426" class="genericon genericon-cloud"></div>
|
||||
<div alt="f427" class="genericon genericon-key"></div>
|
||||
<div alt="f428" class="genericon genericon-dot"></div>
|
||||
<div alt="f429" class="genericon genericon-next"></div>
|
||||
<div alt="f430" class="genericon genericon-previous"></div>
|
||||
<div alt="f431" class="genericon genericon-expand"></div>
|
||||
<div alt="f432" class="genericon genericon-collapse"></div>
|
||||
<div alt="f433" class="genericon genericon-dropdown"></div>
|
||||
<div alt="f434" class="genericon genericon-dropdown-left"></div>
|
||||
<div alt="f435" class="genericon genericon-top"></div>
|
||||
<div alt="f436" class="genericon genericon-draggable"></div>
|
||||
<div alt="f437" class="genericon genericon-phone"></div>
|
||||
<div alt="f438" class="genericon genericon-send-to-phone"></div>
|
||||
<div alt="f439" class="genericon genericon-plugin"></div>
|
||||
<div alt="f440" class="genericon genericon-cloud-download"></div>
|
||||
<div alt="f441" class="genericon genericon-cloud-upload"></div>
|
||||
<div alt="f442" class="genericon genericon-external"></div>
|
||||
<div alt="f443" class="genericon genericon-document"></div>
|
||||
<div alt="f444" class="genericon genericon-book"></div>
|
||||
<div alt="f445" class="genericon genericon-cog"></div>
|
||||
<div alt="f446" class="genericon genericon-unapprove"></div>
|
||||
<div alt="f447" class="genericon genericon-cart"></div>
|
||||
<div alt="f448" class="genericon genericon-pause"></div>
|
||||
<div alt="f449" class="genericon genericon-stop"></div>
|
||||
<div alt="f450" class="genericon genericon-skip-back"></div>
|
||||
<div alt="f451" class="genericon genericon-skip-ahead"></div>
|
||||
<div alt="f452" class="genericon genericon-play"></div>
|
||||
<div alt="f453" class="genericon genericon-tablet"></div>
|
||||
<div alt="f454" class="genericon genericon-send-to-tablet"></div>
|
||||
<div alt="f455" class="genericon genericon-info"></div>
|
||||
<div alt="f456" class="genericon genericon-notice"></div>
|
||||
<div alt="f457" class="genericon genericon-help"></div>
|
||||
<div alt="f458" class="genericon genericon-fastforward"></div>
|
||||
<div alt="f459" class="genericon genericon-rewind"></div>
|
||||
<div alt="f460" class="genericon genericon-portfolio"></div>
|
||||
<div alt="f461" class="genericon genericon-heart"></div>
|
||||
<div alt="f462" class="genericon genericon-code"></div>
|
||||
<div alt="f463" class="genericon genericon-subscribe"></div>
|
||||
<div alt="f464" class="genericon genericon-unsubscribe"></div>
|
||||
<div alt="f465" class="genericon genericon-subscribed"></div>
|
||||
<div alt="f466" class="genericon genericon-reply-alt"></div>
|
||||
<div alt="f467" class="genericon genericon-reply-single"></div>
|
||||
<div alt="f468" class="genericon genericon-flag"></div>
|
||||
<div alt="f469" class="genericon genericon-print"></div>
|
||||
<div alt="f470" class="genericon genericon-lock"></div>
|
||||
<div alt="f471" class="genericon genericon-bold"></div>
|
||||
<div alt="f472" class="genericon genericon-italic"></div>
|
||||
<div alt="f473" class="genericon genericon-picture"></div>
|
||||
<div alt="f474" class="genericon genericon-fullscreen"></div>
|
||||
|
||||
<!-- generic shapes -->
|
||||
<div alt="f500" class="genericon genericon-uparrow"></div>
|
||||
<div alt="f501" class="genericon genericon-rightarrow"></div>
|
||||
<div alt="f502" class="genericon genericon-downarrow"></div>
|
||||
<div alt="f503" class="genericon genericon-leftarrow"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<p>If you want to insert an icon manually using the <code>:before</code> selector, you can setup CSS rules like the following example. <strong>Make sure to set the size to a multiple of 16px</strong> or the icons could end up looking fuzzy:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 150px;" onclick="select();">.my-icon:before {
|
||||
content: '\f408';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 32px/1 'Genericons';
|
||||
vertical-align: middle;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Add a matching class to your HTML:</p>
|
||||
|
||||
<p><code><div class="my-icon">You're a Star!</div></code></p>
|
||||
|
||||
<p>Here's the result: <span class="my-icon">You're a Star!</span></p>
|
||||
|
||||
<h2>Examples</h2>
|
||||
|
||||
<p>Turn every icon a <span style="color: #fa8072;">Salmon</span> color:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 70px" onclick="select();">
|
||||
.genericon {
|
||||
color: #fa8072;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Or turn the stars <span style="color: #ffd700;">Gold</span>:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 70px" onclick="select();">
|
||||
.genericon-star {
|
||||
color: #fa8072;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Use icons for bulleted lists:</p>
|
||||
|
||||
<ul class="my-checklist">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
|
||||
<p><textarea class="code" style="min-height: 130px" onclick="select();">
|
||||
<ul class="my-checklist">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul></textarea></p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 260px;" onclick="select();">
|
||||
.my-checklist {
|
||||
list-style-type: none;
|
||||
text-indent: -16px;
|
||||
}
|
||||
.my-checklist li:before {
|
||||
padding-right: 16px;
|
||||
content: '\f418';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 16px/1 'Genericons';
|
||||
vertical-align: text-top;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Use icons to style blockquotes:</p>
|
||||
|
||||
<blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. —<em>Lewis Carroll</em></blockquote>
|
||||
<blockquote class="my-blockquote">`Twas brillig, and the slithy toves Did gyre and gimble in the wabe: All mimsy were the borogoves, And the mome raths outgrabe. "Beware the Jabberwock, my son! The jaws that bite, the claws that catch! Beware the Jubjub bird, and shun The frumious Bandersnatch!"</blockquote>
|
||||
|
||||
<p><textarea class="code" style="min-height: 40px;" onclick="select();"><blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. —<em>Lewis Carroll</em></blockquote></textarea></p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 300px;" onclick="select();">
|
||||
.my-blockquote {
|
||||
background: #eee;
|
||||
border-left: 32px solid #ddd;
|
||||
padding: 10px;
|
||||
}
|
||||
.my-blockquote:before {
|
||||
margin-left: -42px;
|
||||
padding-right: 10px;
|
||||
content: '\f106';
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 32px/20px 'Genericons';
|
||||
vertical-align: bottom;
|
||||
} </textarea></p>
|
||||
|
||||
<p>Use icons to style buttons:</p>
|
||||
|
||||
<a class="my-button" href="javascript:void()"><i class="genericon genericon-show"></i> View</a>
|
||||
<a class="my-button" href="javascript:void()"><i class="genericon genericon-audio"></i> Listen</a>
|
||||
|
||||
<p><textarea class="code" style="min-height: 40px;" onclick="select();"><a class="my-button" href="#"><i class="genericon genericon-show"></i> View</a>
|
||||
<a class="my-button" href="#"><i class="genericon genericon-audio"></i> Listen</a></textarea></p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 300px;" onclick="select();">
|
||||
.my-button {
|
||||
font-family: Helvetica, sans-serif;
|
||||
background: #e05d22; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #e05d22 0%, #d94412 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #e05d22 0%, #d94412 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #e05d22 0%, #d94412 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */
|
||||
display: inline-block;
|
||||
padding: 10px 16px 6px 16px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid #b93207;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.my-button:hover,
|
||||
.my-button:focus {
|
||||
background: #ed6a31; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.my-button:active {
|
||||
background: #d94412; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient( top, #d94412 0%, #e05d22 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient( top, #d94412 0%, #e05d22 100%); /* IE10+ */
|
||||
background: -o-linear-gradient( top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient( to bottom, #d94412 0%, #e05d22 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */
|
||||
border: none;
|
||||
border-top: 3px solid #b93207;
|
||||
padding: 6px 16px 10px 16px;
|
||||
}</textarea>/</p>
|
||||
|
||||
<h2>CSS Preprocessors</h2>
|
||||
|
||||
<p>Preprocessing extensions such as Sass (SCSS Syntax) or LESS</a> can make it easier to manage CSS for a lot of things at once using things like variables and mixins.</p>
|
||||
|
||||
<p>This example will seup the basic genericon rules and sets a color you can use for all icons using Sass:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 360px;" onclick="select();">$icon-color: "#fa8072";
|
||||
|
||||
.genericon {
|
||||
color: $icon-color;
|
||||
}
|
||||
|
||||
@mixin genericon-rules {
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 16px/1 'Genericons';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.my-icon:before {
|
||||
content: '\f408';
|
||||
@include genericon-rules;
|
||||
}</textarea></p>
|
||||
|
||||
<p>Here is a similar example for LESS:</p>
|
||||
|
||||
<p><textarea class="code" style="min-height: 360px;" onclick="select();">@icon-color: "#fa8072";
|
||||
|
||||
.genericon {
|
||||
color: @icon-color;
|
||||
}
|
||||
|
||||
.genericon-rules {
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 16px/1 'Genericons';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.my-icon:before {
|
||||
content: '\f408';
|
||||
.genericon-rules;
|
||||
}</textarea></p>
|
||||
|
||||
<h2>Fallback images for IE7 and below</h2>
|
||||
|
||||
<p>Genericons <strong>does not come with fallback icons by default</strong> -- therefore you have to create them yourself. If you are using HTML similar to this example:
|
||||
|
||||
<p><code><span class="genericon genericon-warning"></span></code></p>
|
||||
|
||||
<p>You can use the asterisk hack to serve a different icon to IE7 once you have saved the fallback icons to your project:</p>
|
||||
|
||||
<textarea class="code" style="min-height: 85px;" onclick="select();">.genericon-warning {
|
||||
*background: url(fallback-icon.png) no-repeat center center;
|
||||
*text-indent: 100%;
|
||||
}</textarea>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,23 +13,141 @@ if ( !function_exists('_') ) {
|
||||
}
|
||||
}
|
||||
|
||||
if ( !function_exists('mb_substr') ):
|
||||
function mb_substr( $str, $start, $length=null, $encoding=null ) {
|
||||
return _mb_substr($str, $start, $length, $encoding);
|
||||
/**
|
||||
* Returns whether PCRE/u (PCRE_UTF8 modifier) is available for use.
|
||||
*
|
||||
* @ignore
|
||||
* @since 4.2.2
|
||||
* @access private
|
||||
*
|
||||
* @param bool $set - Used for testing only
|
||||
* null : default - get PCRE/u capability
|
||||
* false : Used for testing - return false for future calls to this function
|
||||
* 'reset': Used for testing - restore default behavior of this function
|
||||
*/
|
||||
function _wp_can_use_pcre_u( $set = null ) {
|
||||
static $utf8_pcre = 'reset';
|
||||
|
||||
if ( null !== $set ) {
|
||||
$utf8_pcre = $set;
|
||||
}
|
||||
|
||||
if ( 'reset' === $utf8_pcre ) {
|
||||
$utf8_pcre = @preg_match( '/^./u', 'a' );
|
||||
}
|
||||
|
||||
return $utf8_pcre;
|
||||
}
|
||||
|
||||
if ( ! function_exists( 'mb_substr' ) ) :
|
||||
function mb_substr( $str, $start, $length = null, $encoding = null ) {
|
||||
return _mb_substr( $str, $start, $length, $encoding );
|
||||
}
|
||||
endif;
|
||||
|
||||
function _mb_substr( $str, $start, $length=null, $encoding=null ) {
|
||||
// the solution below, works only for utf-8, so in case of a different
|
||||
// charset, just use built-in substr
|
||||
$charset = get_option( 'blog_charset' );
|
||||
if ( !in_array( $charset, array('utf8', 'utf-8', 'UTF8', 'UTF-8') ) ) {
|
||||
return is_null( $length )? substr( $str, $start ) : substr( $str, $start, $length);
|
||||
/*
|
||||
* Only understands UTF-8 and 8bit. All other character sets will be treated as 8bit.
|
||||
* For $encoding === UTF-8, the $str input is expected to be a valid UTF-8 byte sequence.
|
||||
* The behavior of this function for invalid inputs is undefined.
|
||||
*/
|
||||
function _mb_substr( $str, $start, $length = null, $encoding = null ) {
|
||||
if ( null === $encoding ) {
|
||||
$encoding = get_option( 'blog_charset' );
|
||||
}
|
||||
// use the regex unicode support to separate the UTF-8 characters into an array
|
||||
preg_match_all( '/./us', $str, $match );
|
||||
$chars = is_null( $length )? array_slice( $match[0], $start ) : array_slice( $match[0], $start, $length );
|
||||
return implode( '', $chars );
|
||||
|
||||
// The solution below works only for UTF-8,
|
||||
// so in case of a different charset just use built-in substr()
|
||||
if ( ! in_array( $encoding, array( 'utf8', 'utf-8', 'UTF8', 'UTF-8' ) ) ) {
|
||||
return is_null( $length ) ? substr( $str, $start ) : substr( $str, $start, $length );
|
||||
}
|
||||
|
||||
if ( _wp_can_use_pcre_u() ) {
|
||||
// Use the regex unicode support to separate the UTF-8 characters into an array
|
||||
preg_match_all( '/./us', $str, $match );
|
||||
$chars = is_null( $length ) ? array_slice( $match[0], $start ) : array_slice( $match[0], $start, $length );
|
||||
return implode( '', $chars );
|
||||
}
|
||||
|
||||
$regex = '/(
|
||||
[\x00-\x7F] # single-byte sequences 0xxxxxxx
|
||||
| [\xC2-\xDF][\x80-\xBF] # double-byte sequences 110xxxxx 10xxxxxx
|
||||
| \xE0[\xA0-\xBF][\x80-\xBF] # triple-byte sequences 1110xxxx 10xxxxxx * 2
|
||||
| [\xE1-\xEC][\x80-\xBF]{2}
|
||||
| \xED[\x80-\x9F][\x80-\xBF]
|
||||
| [\xEE-\xEF][\x80-\xBF]{2}
|
||||
| \xF0[\x90-\xBF][\x80-\xBF]{2} # four-byte sequences 11110xxx 10xxxxxx * 3
|
||||
| [\xF1-\xF3][\x80-\xBF]{3}
|
||||
| \xF4[\x80-\x8F][\x80-\xBF]{2}
|
||||
)/x';
|
||||
|
||||
$chars = array( '' ); // Start with 1 element instead of 0 since the first thing we do is pop
|
||||
do {
|
||||
// We had some string left over from the last round, but we counted it in that last round.
|
||||
array_pop( $chars );
|
||||
|
||||
// Split by UTF-8 character, limit to 1000 characters (last array element will contain the rest of the string)
|
||||
$pieces = preg_split( $regex, $str, 1000, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY );
|
||||
|
||||
$chars = array_merge( $chars, $pieces );
|
||||
} while ( count( $pieces ) > 1 && $str = array_pop( $pieces ) ); // If there's anything left over, repeat the loop.
|
||||
|
||||
return join( '', array_slice( $chars, $start, $length ) );
|
||||
}
|
||||
|
||||
if ( ! function_exists( 'mb_strlen' ) ) :
|
||||
function mb_strlen( $str, $encoding = null ) {
|
||||
return _mb_strlen( $str, $encoding );
|
||||
}
|
||||
endif;
|
||||
|
||||
/*
|
||||
* Only understands UTF-8 and 8bit. All other character sets will be treated as 8bit.
|
||||
* For $encoding === UTF-8, the $str input is expected to be a valid UTF-8 byte sequence.
|
||||
* The behavior of this function for invalid inputs is undefined.
|
||||
*/
|
||||
function _mb_strlen( $str, $encoding = null ) {
|
||||
if ( null === $encoding ) {
|
||||
$encoding = get_option( 'blog_charset' );
|
||||
}
|
||||
|
||||
// The solution below works only for UTF-8,
|
||||
// so in case of a different charset just use built-in strlen()
|
||||
if ( ! in_array( $encoding, array( 'utf8', 'utf-8', 'UTF8', 'UTF-8' ) ) ) {
|
||||
return strlen( $str );
|
||||
}
|
||||
|
||||
if ( _wp_can_use_pcre_u() ) {
|
||||
// Use the regex unicode support to separate the UTF-8 characters into an array
|
||||
preg_match_all( '/./us', $str, $match );
|
||||
return count( $match[0] );
|
||||
}
|
||||
|
||||
$regex = '/(?:
|
||||
[\x00-\x7F] # single-byte sequences 0xxxxxxx
|
||||
| [\xC2-\xDF][\x80-\xBF] # double-byte sequences 110xxxxx 10xxxxxx
|
||||
| \xE0[\xA0-\xBF][\x80-\xBF] # triple-byte sequences 1110xxxx 10xxxxxx * 2
|
||||
| [\xE1-\xEC][\x80-\xBF]{2}
|
||||
| \xED[\x80-\x9F][\x80-\xBF]
|
||||
| [\xEE-\xEF][\x80-\xBF]{2}
|
||||
| \xF0[\x90-\xBF][\x80-\xBF]{2} # four-byte sequences 11110xxx 10xxxxxx * 3
|
||||
| [\xF1-\xF3][\x80-\xBF]{3}
|
||||
| \xF4[\x80-\x8F][\x80-\xBF]{2}
|
||||
)/x';
|
||||
|
||||
$count = 1; // Start at 1 instead of 0 since the first thing we do is decrement
|
||||
do {
|
||||
// We had some string left over from the last round, but we counted it in that last round.
|
||||
$count--;
|
||||
|
||||
// Split by UTF-8 character, limit to 1000 characters (last array element will contain the rest of the string)
|
||||
$pieces = preg_split( $regex, $str, 1000 );
|
||||
|
||||
// Increment
|
||||
$count += count( $pieces );
|
||||
} while ( $str = array_pop( $pieces ) ); // If there's anything left over, repeat the loop.
|
||||
|
||||
// Fencepost: preg_split() always returns one extra item in the array
|
||||
return --$count;
|
||||
}
|
||||
|
||||
if ( !function_exists('hash_hmac') ):
|
||||
|
||||
@@ -106,6 +106,10 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
|
||||
'<img src="' + tinymce.Env.transparentSrc + '" data-wp-more="nextpage" class="wp-more-tag mce-wp-nextpage" ' +
|
||||
'title="' + title + '" data-mce-resize="false" data-mce-placeholder="1" />' );
|
||||
}
|
||||
|
||||
if ( e.content.indexOf( '<?"' ) !== -1 ) {
|
||||
e.content = e.content.replace( /<\?"/g, '' );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -4,21 +4,21 @@
|
||||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.1.3';
|
||||
$wp_version = '4.1.5';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
*
|
||||
* @global int $wp_db_version
|
||||
*/
|
||||
$wp_db_version = 30133;
|
||||
$wp_db_version = 30135;
|
||||
|
||||
/**
|
||||
* Holds the TinyMCE version
|
||||
*
|
||||
* @global string $tinymce_version
|
||||
*/
|
||||
$tinymce_version = '4107-20150118';
|
||||
$tinymce_version = '4107-20150505';
|
||||
|
||||
/**
|
||||
* Holds the required PHP version
|
||||
|
||||
@@ -1789,6 +1789,8 @@ class wpdb {
|
||||
* @return int|false The number of rows affected, or false on error.
|
||||
*/
|
||||
function _insert_replace_helper( $table, $data, $format = null, $type = 'INSERT' ) {
|
||||
$this->insert_id = 0;
|
||||
|
||||
if ( ! in_array( strtoupper( $type ), array( 'REPLACE', 'INSERT' ) ) ) {
|
||||
return false;
|
||||
}
|
||||
@@ -1809,7 +1811,6 @@ class wpdb {
|
||||
|
||||
$sql = "$type INTO `$table` ($fields) VALUES ($formats)";
|
||||
|
||||
$this->insert_id = 0;
|
||||
$this->check_current_query = false;
|
||||
return $this->query( $this->prepare( $sql, $values ) );
|
||||
}
|
||||
@@ -1926,11 +1927,20 @@ class wpdb {
|
||||
*/
|
||||
protected function process_fields( $table, $data, $format ) {
|
||||
$data = $this->process_field_formats( $data, $format );
|
||||
if ( false === $data ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$data = $this->process_field_charsets( $data, $table );
|
||||
if ( false === $data ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$data = $this->process_field_lengths( $data, $table );
|
||||
if ( false === $data ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$converted_data = $this->strip_invalid_text( $data );
|
||||
|
||||
if ( $data !== $converted_data ) {
|
||||
@@ -1992,17 +2002,41 @@ class wpdb {
|
||||
// We can skip this field if we know it isn't a string.
|
||||
// This checks %d/%f versus ! %s because it's sprintf() could take more.
|
||||
$value['charset'] = false;
|
||||
} elseif ( $this->check_ascii( $value['value'] ) ) {
|
||||
// If it's ASCII, then we don't need the charset. We can skip this field.
|
||||
$value['charset'] = false;
|
||||
} else {
|
||||
$value['charset'] = $this->get_col_charset( $table, $field );
|
||||
if ( is_wp_error( $value['charset'] ) ) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// This isn't ASCII. Don't have strip_invalid_text() re-check.
|
||||
$value['ascii'] = false;
|
||||
$data[ $field ] = $value;
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
/**
|
||||
* For string fields, record the maximum string length that field can safely save.
|
||||
*
|
||||
* @since 4.2.1
|
||||
* @access protected
|
||||
*
|
||||
* @param array $data As it comes from the wpdb::process_field_charsets() method.
|
||||
* @param string $table Table name.
|
||||
* @return array|False The same array as $data with additional 'length' keys, or false if
|
||||
* any of the values were too long for their corresponding field.
|
||||
*/
|
||||
protected function process_field_lengths( $data, $table ) {
|
||||
foreach ( $data as $field => $value ) {
|
||||
if ( '%d' === $value['format'] || '%f' === $value['format'] ) {
|
||||
// We can skip this field if we know it isn't a string.
|
||||
// This checks %d/%f versus ! %s because it's sprintf() could take more.
|
||||
$value['length'] = false;
|
||||
} else {
|
||||
$value['length'] = $this->get_col_length( $table, $field );
|
||||
if ( is_wp_error( $value['length'] ) ) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
$data[ $field ] = $value;
|
||||
@@ -2212,7 +2246,10 @@ class wpdb {
|
||||
}
|
||||
|
||||
$charsets = $columns = array();
|
||||
$results = $this->get_results( "SHOW FULL COLUMNS FROM `$table`" );
|
||||
|
||||
$table_parts = explode( '.', $table );
|
||||
$table = '`' . implode( '`.`', $table_parts ) . '`';
|
||||
$results = $this->get_results( "SHOW FULL COLUMNS FROM $table" );
|
||||
if ( ! $results ) {
|
||||
return new WP_Error( 'wpdb_get_table_charset_failure' );
|
||||
}
|
||||
@@ -2335,6 +2372,99 @@ class wpdb {
|
||||
return $charset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve the maximum string length allowed in a given column.
|
||||
* The length may either be specified as a byte length or a character length.
|
||||
*
|
||||
* @since 4.2.1
|
||||
* @access public
|
||||
*
|
||||
* @param string $table Table name.
|
||||
* @param string $column Column name.
|
||||
* @return mixed array( 'length' => (int), 'type' => 'byte' | 'char' )
|
||||
* false if the column has no length (for example, numeric column)
|
||||
* WP_Error object if there was an error.
|
||||
*/
|
||||
public function get_col_length( $table, $column ) {
|
||||
$tablekey = strtolower( $table );
|
||||
$columnkey = strtolower( $column );
|
||||
|
||||
// Skip this entirely if this isn't a MySQL database.
|
||||
if ( false === $this->is_mysql ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( empty( $this->col_meta[ $tablekey ] ) ) {
|
||||
// This primes column information for us.
|
||||
$table_charset = $this->get_table_charset( $table );
|
||||
if ( is_wp_error( $table_charset ) ) {
|
||||
return $table_charset;
|
||||
}
|
||||
}
|
||||
|
||||
if ( empty( $this->col_meta[ $tablekey ][ $columnkey ] ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$typeinfo = explode( '(', $this->col_meta[ $tablekey ][ $columnkey ]->Type );
|
||||
|
||||
$type = strtolower( $typeinfo[0] );
|
||||
if ( ! empty( $typeinfo[1] ) ) {
|
||||
$length = trim( $typeinfo[1], ')' );
|
||||
} else {
|
||||
$length = false;
|
||||
}
|
||||
|
||||
switch( $type ) {
|
||||
case 'char':
|
||||
case 'varchar':
|
||||
return array(
|
||||
'type' => 'char',
|
||||
'length' => (int) $length,
|
||||
);
|
||||
break;
|
||||
case 'binary':
|
||||
case 'varbinary':
|
||||
return array(
|
||||
'type' => 'byte',
|
||||
'length' => (int) $length,
|
||||
);
|
||||
break;
|
||||
case 'tinyblob':
|
||||
case 'tinytext':
|
||||
return array(
|
||||
'type' => 'byte',
|
||||
'length' => 255, // 2^8 - 1
|
||||
);
|
||||
break;
|
||||
case 'blob':
|
||||
case 'text':
|
||||
return array(
|
||||
'type' => 'byte',
|
||||
'length' => 65535, // 2^16 - 1
|
||||
);
|
||||
break;
|
||||
case 'mediumblob':
|
||||
case 'mediumtext':
|
||||
return array(
|
||||
'type' => 'byte',
|
||||
'length' => 16777215, // 2^24 - 1
|
||||
);
|
||||
break;
|
||||
case 'longblob':
|
||||
case 'longtext':
|
||||
return array(
|
||||
'type' => 'byte',
|
||||
'length' => 4294967295, // 2^32 - 1
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a string is ASCII.
|
||||
*
|
||||
@@ -2375,7 +2505,7 @@ class wpdb {
|
||||
|
||||
// We don't need to check the collation for queries that don't read data.
|
||||
$query = ltrim( $query, "\r\n\t (" );
|
||||
if ( preg_match( '/^(?:SHOW|DESCRIBE|DESC|EXPLAIN)\s/i', $query ) ) {
|
||||
if ( preg_match( '/^(?:SHOW|DESCRIBE|DESC|EXPLAIN|CREATE)\s/i', $query ) ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -2433,50 +2563,55 @@ class wpdb {
|
||||
*/
|
||||
// If any of the columns don't have one of these collations, it needs more sanity checking.
|
||||
protected function strip_invalid_text( $data ) {
|
||||
// Some multibyte character sets that we can check in PHP.
|
||||
$mb_charsets = array(
|
||||
'ascii' => 'ASCII',
|
||||
'big5' => 'BIG-5',
|
||||
'eucjpms' => 'eucJP-win',
|
||||
'gb2312' => 'EUC-CN',
|
||||
'ujis' => 'EUC-JP',
|
||||
'utf32' => 'UTF-32',
|
||||
);
|
||||
|
||||
$supported_charsets = array();
|
||||
if ( function_exists( 'mb_list_encodings' ) ) {
|
||||
$supported_charsets = mb_list_encodings();
|
||||
}
|
||||
|
||||
$db_check_string = false;
|
||||
|
||||
foreach ( $data as &$value ) {
|
||||
$charset = $value['charset'];
|
||||
|
||||
// Column isn't a string, or is latin1, which will will happily store anything.
|
||||
if ( false === $charset || 'latin1' === $charset ) {
|
||||
if ( is_array( $value['length'] ) ) {
|
||||
$length = $value['length']['length'];
|
||||
} else {
|
||||
$length = false;
|
||||
}
|
||||
|
||||
// There's no charset to work with.
|
||||
if ( false === $charset ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Column isn't a string.
|
||||
if ( ! is_string( $value['value'] ) ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// ASCII is always OK.
|
||||
if ( ! isset( $value['ascii'] ) && $this->check_ascii( $value['value'] ) ) {
|
||||
continue;
|
||||
$truncate_by_byte_length = 'byte' === $value['length']['type'];
|
||||
|
||||
$needs_validation = true;
|
||||
if (
|
||||
// latin1 can store any byte sequence
|
||||
'latin1' === $charset
|
||||
||
|
||||
// ASCII is always OK.
|
||||
( ! isset( $value['ascii'] ) && $this->check_ascii( $value['value'] ) )
|
||||
) {
|
||||
$truncate_by_byte_length = true;
|
||||
$needs_validation = false;
|
||||
}
|
||||
|
||||
// Convert the text locally.
|
||||
if ( $supported_charsets ) {
|
||||
if ( isset( $mb_charsets[ $charset ] ) && in_array( $mb_charsets[ $charset ], $supported_charsets ) ) {
|
||||
$value['value'] = mb_convert_encoding( $value['value'], $mb_charsets[ $charset ], $mb_charsets[ $charset ] );
|
||||
if ( $truncate_by_byte_length ) {
|
||||
mbstring_binary_safe_encoding();
|
||||
if ( false !== $length && strlen( $value['value'] ) > $length ) {
|
||||
$value['value'] = substr( $value['value'], 0, $length );
|
||||
}
|
||||
reset_mbstring_encoding();
|
||||
|
||||
if ( ! $needs_validation ) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// utf8 can be handled by regex, which is a bunch faster than a DB lookup.
|
||||
if ( 'utf8' === $charset || 'utf8mb3' === $charset || 'utf8mb4' === $charset ) {
|
||||
if ( ( 'utf8' === $charset || 'utf8mb3' === $charset || 'utf8mb4' === $charset ) && function_exists( 'mb_strlen' ) ) {
|
||||
$regex = '/
|
||||
(
|
||||
(?: [\x00-\x7F] # single-byte sequences 0xxxxxxx
|
||||
@@ -2486,7 +2621,7 @@ class wpdb {
|
||||
| \xED[\x80-\x9F][\x80-\xBF]
|
||||
| [\xEE-\xEF][\x80-\xBF]{2}';
|
||||
|
||||
if ( 'utf8mb4' === $charset) {
|
||||
if ( 'utf8mb4' === $charset ) {
|
||||
$regex .= '
|
||||
| \xF0[\x90-\xBF][\x80-\xBF]{2} # four-byte sequences 11110xxx 10xxxxxx * 3
|
||||
| [\xF1-\xF3][\x80-\xBF]{3}
|
||||
@@ -2494,11 +2629,16 @@ class wpdb {
|
||||
';
|
||||
}
|
||||
|
||||
$regex .= '){1,50} # ...one or more times
|
||||
$regex .= '){1,40} # ...one or more times
|
||||
)
|
||||
| . # anything else
|
||||
/x';
|
||||
$value['value'] = preg_replace( $regex, '$1', $value['value'] );
|
||||
|
||||
|
||||
if ( false !== $length && mb_strlen( $value['value'], 'UTF-8' ) > $length ) {
|
||||
$value['value'] = mb_substr( $value['value'], 0, $length, 'UTF-8' );
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
@@ -2515,8 +2655,14 @@ class wpdb {
|
||||
$queries[ $value['charset'] ] = array();
|
||||
}
|
||||
|
||||
// Split the CONVERT() calls by charset, so we can make sure the connection is right
|
||||
$queries[ $value['charset'] ][ $col ] = $this->prepare( "CONVERT( %s USING {$value['charset']} )", $value['value'] );
|
||||
// We're going to need to truncate by characters or bytes, depending on the length value we have.
|
||||
if ( 'byte' === $value['length']['type'] ) {
|
||||
// Split the CONVERT() calls by charset, so we can make sure the connection is right
|
||||
$queries[ $value['charset'] ][ $col ] = $this->prepare( "CONVERT( LEFT( CONVERT( %s USING binary ), %d ) USING {$value['charset']} )", $value['value'], $value['length']['length'] );
|
||||
} else {
|
||||
$queries[ $value['charset'] ][ $col ] = $this->prepare( "LEFT( CONVERT( %s USING {$value['charset']} ), %d )", $value['value'], $value['length']['length'] );
|
||||
}
|
||||
|
||||
unset( $data[ $col ]['db'] );
|
||||
}
|
||||
}
|
||||
@@ -2535,16 +2681,19 @@ class wpdb {
|
||||
|
||||
$this->check_current_query = false;
|
||||
|
||||
$row = $this->get_row( "SELECT " . implode( ', ', $query ), ARRAY_N );
|
||||
$sql = array();
|
||||
foreach ( $query as $column => $column_query ) {
|
||||
$sql[] = $column_query . " AS x_$column";
|
||||
}
|
||||
|
||||
$row = $this->get_row( "SELECT " . implode( ', ', $sql ), ARRAY_A );
|
||||
if ( ! $row ) {
|
||||
$this->set_charset( $this->dbh, $connection_charset );
|
||||
return new WP_Error( 'wpdb_strip_invalid_text_failure' );
|
||||
}
|
||||
|
||||
$cols = array_keys( $query );
|
||||
$col_count = count( $cols );
|
||||
for ( $ii = 0; $ii < $col_count; $ii++ ) {
|
||||
$data[ $cols[ $ii ] ]['value'] = $row[ $ii ];
|
||||
foreach ( array_keys( $query ) as $column ) {
|
||||
$data[ $column ]['value'] = $row["x_$column"];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2567,6 +2716,12 @@ class wpdb {
|
||||
* @return string|WP_Error The converted query, or a {@see WP_Error} object if the conversion fails.
|
||||
*/
|
||||
protected function strip_invalid_text_from_query( $query ) {
|
||||
// We don't need to check the collation for queries that don't read data.
|
||||
$trimmed_query = ltrim( $query, "\r\n\t (" );
|
||||
if ( preg_match( '/^(?:SHOW|DESCRIBE|DESC|EXPLAIN|CREATE)\s/i', $trimmed_query ) ) {
|
||||
return $query;
|
||||
}
|
||||
|
||||
$table = $this->get_table_from_query( $query );
|
||||
if ( $table ) {
|
||||
$charset = $this->get_table_charset( $table );
|
||||
@@ -2586,6 +2741,7 @@ class wpdb {
|
||||
'value' => $query,
|
||||
'charset' => $charset,
|
||||
'ascii' => false,
|
||||
'length' => false,
|
||||
);
|
||||
|
||||
$data = $this->strip_invalid_text( array( $data ) );
|
||||
@@ -2608,7 +2764,7 @@ class wpdb {
|
||||
* @return string|WP_Error The converted string, or a `WP_Error` object if the conversion fails.
|
||||
*/
|
||||
public function strip_invalid_text_for_column( $table, $column, $value ) {
|
||||
if ( ! is_string( $value ) || $this->check_ascii( $value ) ) {
|
||||
if ( ! is_string( $value ) ) {
|
||||
return $value;
|
||||
}
|
||||
|
||||
@@ -2625,7 +2781,7 @@ class wpdb {
|
||||
$column => array(
|
||||
'value' => $value,
|
||||
'charset' => $charset,
|
||||
'ascii' => false,
|
||||
'length' => $this->get_col_length( $table, $column ),
|
||||
)
|
||||
);
|
||||
|
||||
@@ -2666,16 +2822,16 @@ class wpdb {
|
||||
. '|REPLACE(?:\s+LOW_PRIORITY|\s+DELAYED)?(?:\s+INTO)?'
|
||||
. '|UPDATE(?:\s+LOW_PRIORITY)?(?:\s+IGNORE)?'
|
||||
. '|DELETE(?:\s+LOW_PRIORITY|\s+QUICK|\s+IGNORE)*(?:\s+FROM)?'
|
||||
. ')\s+`?([\w-]+)`?/is', $query, $maybe ) ) {
|
||||
return $maybe[1];
|
||||
. ')\s+((?:[0-9a-zA-Z$_.`]|[\xC2-\xDF][\x80-\xBF])+)/is', $query, $maybe ) ) {
|
||||
return str_replace( '`', '', $maybe[1] );
|
||||
}
|
||||
|
||||
// SHOW TABLE STATUS and SHOW TABLES
|
||||
if ( preg_match( '/^\s*(?:'
|
||||
. 'SHOW\s+TABLE\s+STATUS.+(?:LIKE\s+|WHERE\s+Name\s*=\s*)'
|
||||
. '|SHOW\s+(?:FULL\s+)?TABLES.+(?:LIKE\s+|WHERE\s+Name\s*=\s*)'
|
||||
. ')\W([\w-]+)\W/is', $query, $maybe ) ) {
|
||||
return $maybe[1];
|
||||
. ')\W((?:[0-9a-zA-Z$_.`]|[\xC2-\xDF][\x80-\xBF])+)\W/is', $query, $maybe ) ) {
|
||||
return str_replace( '`', '', $maybe[1] );
|
||||
}
|
||||
|
||||
// Big pattern for the rest of the table-related queries.
|
||||
@@ -2693,8 +2849,8 @@ class wpdb {
|
||||
. '|LOAD\s+DATA.*INFILE.*INTO\s+TABLE'
|
||||
. '|(?:GRANT|REVOKE).*ON\s+TABLE'
|
||||
. '|SHOW\s+(?:.*FROM|.*TABLE)'
|
||||
. ')\s+\(*\s*`?([\w-]+)`?\s*\)*/is', $query, $maybe ) ) {
|
||||
return $maybe[1];
|
||||
. ')\s+\(*\s*((?:[0-9a-zA-Z$_.`]|[\xC2-\xDF][\x80-\xBF])+)\s*\)*/is', $query, $maybe ) ) {
|
||||
return str_replace( '`', '', $maybe[1] );
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
Reference in New Issue
Block a user