Icon Fonts - Enhanced lists

Developer
Tim Pietrusky
Size
5,108 Kb
Views
56,672
  1. Icon Fonts - Enhanced lists Previews
  2. Icon Fonts - Enhanced lists HTML Codes
  3. Icon Fonts - Enhanced lists CSS Codes
  4. Icon Fonts - Enhanced lists JS Codes

How do I make an icon fonts - enhanced lists?

For my article 5 Use Cases for Icon Fonts on CSS-Tricks. . What is a icon fonts - enhanced lists? How do you make a icon fonts - enhanced lists? This script and codes were developed by Tim Pietrusky on 20 June 2022, Monday.

Icon Fonts - Enhanced lists Previews
IQ Test

Icon Fonts - Enhanced lists - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icon Fonts - Enhanced lists</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
*,
*:before,
*:after { box-sizing: border-box;
}
html,
body { height: 100%; width: 100%; overflow: hidden; background: #fff; margin: .5em; font: 1em sans-serif;
}
div { float: left; width: 33%; padding: 0 .5em;
}
h2 { margin: .75em 0 .55em 0;
}
ul { width: 100%; list-style: none; padding: 0;
}
ul li { position: relative; min-height: 2em; padding: .3em .3em .3em 1.5em; transition: background 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.1s ease-in-out, height 0.25s ease-in-out;
}
ul li button { position: absolute; left: 1.45em; bottom: .35em; opacity: 0; height: 0; background: rgba(255, 255, 255, 0.7); border: none; font-size: .8em; cursor: pointer; transition: all .4s ease-in-out;
}
ul li:before { position: absolute; top: .425em; font-family: 'FontAwesome', sans-serif; margin: 0 .35em 0 -1.35em; vertical-align: bottom;
}
ul li:hover { color: rgba(255, 255, 255, 0.8); padding-left: 1.5em;
}
ul li:hover button { opacity: 1; height: 2em;
}
ul li:hover:before { color: white; right: 0; transform: scale(2.5, 2.5) translate(-0.25em, 0.15em);
}
ul li:hover:after { position: absolute; text-align: center; content: attr(data-text);
}
.love li:before { content: "\f004";
}
.love li:before, .love li:after { color: rgba(220, 20, 20, 0.6);
}
.love li:hover { background: rgba(220, 20, 20, 0.6);
}
.love li:hover:after { width: 2em; text-align: center; right: .445em;
}
.downloads li { border-bottom: 0.15em solid rgba(0, 0, 0, 0.3);
}
.downloads li:before { content: "\f019"; color: rgba(50, 50, 50, 0.5);
}
.downloads li:hover { background: rgba(0, 140, 0, 0.7); height: 4em;
}
.downloads li:hover:after { text-align: center; right: .35em;
}
.downloads li:hover:before { color: rgba(255, 255, 255, 0.2);
}
.account { padding: .75em; border: 0.15em solid rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.7); background-image: radial-gradient(ellipse cover at center, rgba(104, 104, 104, 0.6) 0%, rgba(23, 23, 23, 0.7) 100%); box-shadow: inset 0 0 0.35em 0 rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.6); backface-visibility: hidden;
}
.account li { cursor: pointer;
}
.account li:nth-child(1):before { content: "\f08a";
}
.account li:nth-child(2):before { content: "\f000";
}
.account li:nth-child(3) { margin-bottom: 1em;
}
.account li:nth-child(3):before { content: "\f075";
}
.account li:nth-child(4) { margin-bottom: .5em;
}
.account li:nth-child(4):before { content: "\f013";
}
.account li:nth-child(5):before { content: "\f08b";
}
.account li:hover { color: white; padding-left: 1.5em; box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.5);
}
.account li:hover:before { color: white; transform: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div> <h2>Stuff you love</h2> <ul class="love"> <li data-text="1">CodePen</li> <li data-text="3">GitHub</li> <li data-text="37">SoundCloud</li> </ul>
</div>
<div> <h2>Downloads</h2> <ul class="downloads"> <li data-text="13.37 GB"> Appliness <button class="fontawesome-download-alt"> get this file</button> </li> <li data-text="42 MB"> Sublime Text <button class="fontawesome-download-alt"> get this file</button> </li> <li data-text="8 KB"> Google Chrome <button class="fontawesome-download-alt"> get this file</button> </li> <li data-text="666 TB"> Windows 9 <button class="fontawesome-download-alt"> get this file</button> </li> </ul>
</div>
<div> <h2>Your account</h2> <ul class="account"> <li>Loved</li> <li>Friends</li> <li>Comments</li> <li>Settings</li> <li>Logout</li> </ul>
</div> <script src="js/index.js"></script>
</body>
</html>

Icon Fonts - Enhanced lists - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
*,
*:before,
*:after { box-sizing: border-box;
}
html,
body { height: 100%; width: 100%; overflow: hidden; background: #fff; margin: .5em; font: 1em sans-serif;
}
div { float: left; width: 33%; padding: 0 .5em;
}
h2 { margin: .75em 0 .55em 0;
}
ul { width: 100%; list-style: none; padding: 0;
}
ul li { position: relative; min-height: 2em; padding: .3em .3em .3em 1.5em; transition: background 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.1s ease-in-out, height 0.25s ease-in-out;
}
ul li button { position: absolute; left: 1.45em; bottom: .35em; opacity: 0; height: 0; background: rgba(255, 255, 255, 0.7); border: none; font-size: .8em; cursor: pointer; transition: all .4s ease-in-out;
}
ul li:before { position: absolute; top: .425em; font-family: 'FontAwesome', sans-serif; margin: 0 .35em 0 -1.35em; vertical-align: bottom;
}
ul li:hover { color: rgba(255, 255, 255, 0.8); padding-left: 1.5em;
}
ul li:hover button { opacity: 1; height: 2em;
}
ul li:hover:before { color: white; right: 0; transform: scale(2.5, 2.5) translate(-0.25em, 0.15em);
}
ul li:hover:after { position: absolute; text-align: center; content: attr(data-text);
}
.love li:before { content: "\f004";
}
.love li:before, .love li:after { color: rgba(220, 20, 20, 0.6);
}
.love li:hover { background: rgba(220, 20, 20, 0.6);
}
.love li:hover:after { width: 2em; text-align: center; right: .445em;
}
.downloads li { border-bottom: 0.15em solid rgba(0, 0, 0, 0.3);
}
.downloads li:before { content: "\f019"; color: rgba(50, 50, 50, 0.5);
}
.downloads li:hover { background: rgba(0, 140, 0, 0.7); height: 4em;
}
.downloads li:hover:after { text-align: center; right: .35em;
}
.downloads li:hover:before { color: rgba(255, 255, 255, 0.2);
}
.account { padding: .75em; border: 0.15em solid rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.7); background-image: radial-gradient(ellipse cover at center, rgba(104, 104, 104, 0.6) 0%, rgba(23, 23, 23, 0.7) 100%); box-shadow: inset 0 0 0.35em 0 rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.6); backface-visibility: hidden;
}
.account li { cursor: pointer;
}
.account li:nth-child(1):before { content: "\f08a";
}
.account li:nth-child(2):before { content: "\f000";
}
.account li:nth-child(3) { margin-bottom: 1em;
}
.account li:nth-child(3):before { content: "\f075";
}
.account li:nth-child(4) { margin-bottom: .5em;
}
.account li:nth-child(4):before { content: "\f013";
}
.account li:nth-child(5):before { content: "\f08b";
}
.account li:hover { color: white; padding-left: 1.5em; box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.5);
}
.account li:hover:before { color: white; transform: none;
}

Icon Fonts - Enhanced lists - Script Codes JS Codes

 /** Icon Fonts - Enhanced lists # What? # For my article "5 Use Cases for Icon Fonts" on CSS-Tricks. http://css-tricks.com/five-use-cases-for-icon-fonts # 2012 by Tim Pietrusky # timpietrusky.com
**/
Icon Fonts - Enhanced lists - Script Codes
Icon Fonts - Enhanced lists - Script Codes
Home Page Home
Developer Tim Pietrusky
Username TimPietrusky
Uploaded June 20, 2022
Rating 4
Size 5,108 Kb
Views 56,672
Do you need developer help for Icon Fonts - Enhanced lists?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Pietrusky (TimPietrusky) Script Codes
Name
Webs Pricing Table
Liquid Loading
Blurry Sweetness
SNES Controller
Off Canvas
Pinky - 1 of 111001100110110111
Kudos Please
Full Horizontal
Advanced Checkbox Hack
Gravatar URL Generator
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!