Custom Rating buttons with Icon Fonts

Developer
Kevin Gimbel
Size
5,022 Kb
Views
30,360
  1. Custom Rating buttons with Icon Fonts Previews
  2. Custom Rating buttons with Icon Fonts HTML Codes
  3. Custom Rating buttons with Icon Fonts CSS Codes

How do I make an custom rating buttons with icon fonts?

Custome ratings with icon fonts. I replaced the standard radio-input with icons from We Love Icon Font and yeah, basically that's it. Custom Ratings start at Line 71.. What is a custom rating buttons with icon fonts? How do you make a custom rating buttons with icon fonts? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

Custom Rating buttons with Icon Fonts Previews
IQ Test

Custom Rating buttons with Icon Fonts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Rating buttons with Icon Fonts</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=entypo);
.rating--box { letter-spacing: -0.31em;
}
.cover, .meta { display: inline-block; letter-spacing: 0; vertical-align: top;
}
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font: 1em/1.65 Arial, Helvetica, sans-serif; background: #333;
}
a { color: #5CA3E6;
}
a:hover { color: #97C0E6;
}
.rating--box { width: 100%; max-width: 40em; height: auto; background: #fff; margin: 2.5em auto; padding: 1em; box-shadow: 0 0 5px black; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
.cover { width: 40%; height: auto;
}
.cover img { max-width: 100%; padding-right: 1rem;
}
.meta { width: 59%;
}
.meta p { line-height: 1.3; margin-bottom: 1.5em;
}
input[type=radio] { -moz-appearance: none; -webkit-appearance: none;
}
input[type=radio]:hover { cursor: pointer;
}
.rating--star { color: #ff7711;
}
.rating--star:before { content: "\2605"; font-size: 2em; font-family: entypo, sans-serif;
}
.rating--star:checked ~ :before { content: "\2606";
}
.rating--star:focus { outline: 0;
}
.rating--star-2 { color: #cc0000;
}
.rating--star-2:before { content: "\2665"; font-size: 2em; font-family: entypo, sans-serif;
}
.rating--star-2:checked ~ :before { content: "\2661";
}
.rating--star-2:focus { outline: 0;
}
.rating--star-3 { color: #cc0000;
}
.rating--star-3:before { content: "\1f3c6"; font-size: 2em; font-family: entypo, sans-serif; color: #eda304;
}
.rating--star-3:checked ~ :before { content: "\1f3c6"; color: #262626;
}
.rating--star-3:focus { outline: 0;
}
.rating--star-4 { color: #cc0000;
}
.rating--star-4:before { content: "\1f680"; font-size: 2em; font-family: entypo, sans-serif; color: #eda304;
}
.rating--star-4:checked ~ :before { content: "\1f680"; color: #262626;
}
.rating--star-4:focus { outline: 0;
}
.credits { width: 100%; max-width: 50em; margin: 1.5em auto 0 auto; background: white; padding: 1em 1.5em;
}
@media all and (max-width: 40em) { body { padding: 1.5em; } .cover { width: 100%; height: 15em; overflow: hidden; display: block; } .cover img { width: 100%; } .meta { width: 100%; max-width: 50em; } .meta p { line-height: 1.3; margin-bottom: 1.5em; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <article class="rating--box"> <aside class="cover"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12117/new_hope.jpg" alt="Ghost In The Shell Cover" /> </aside> <div class="meta"> <h1>Star Wars Episode IV: A New Hope</h1> <h3>by George Lucas</h3> <p class="excerpt">Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, a wookiee and two droids to save the universe from the Empire's world-destroying battle-station, while also attempting to rescue Princess Leia from the evil Darth Vader.</p> <input type="radio" data-rate="1" name="rating" class="rating--star" /> <input type="radio" data-rate="2" name="rating" class="rating--star"/> <input type="radio" data-rate="3" name="rating" class="rating--star" /> <input type="radio" data-rate="4" name="rating" class="rating--star" checked /> <input type="radio" data-rate="5" name="rating" class="rating--star"/> </div>
</article>
<article class="rating--box"> <aside class="cover"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12117/ghost_in_the_shell.jpg" alt="Ghost In The Shell Cover" /> </aside> <div class="meta"> <h1>Ghost In The Shell</h1> <h3>by Mamoru Oshii</h3> <p class="excerpt">A female cyborg cop and her partner hunt a mysterious and powerful hacker called the Puppet Master.</p> <input type="radio" data-rate="1" name="rating-2" class="rating--star-2" /> <input type="radio" data-rate="2" name="rating-2" class="rating--star-2" /> <input type="radio" data-rate="3" name="rating-2" class="rating--star-2" checked /> <input type="radio" data-rate="4" name="rating-2" class="rating--star-2" /> <input type="radio" data-rate="5" name="rating-2" class="rating--star-2"/> </div>
</article>
<article class="rating--box"> <aside class="cover"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12117/pulp_fiction.jpg" alt="Ghost In The Shell Cover" /> </aside> <div class="meta"> <h1>Pulp Fiction</h1> <h3>by Quentin Tarantino</h3> <p class="excerpt">The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.</p> <input type="radio" data-rate="1" name="rating-3" class="rating--star-3" /> <input type="radio" data-rate="2" name="rating-3" class="rating--star-3" /> <input type="radio" data-rate="3" name="rating-3" class="rating--star-3" /> <input type="radio" data-rate="4" name="rating-3" class="rating--star-3" checked/> <input type="radio" data-rate="5" name="rating-3" class="rating--star-3" /> </div>
</article>
<article class="rating--box"> <aside class="cover"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12117/star_trek.jpg" alt="Ghost In The Shell Cover" /> </aside> <div class="meta"> <h1>Star Trek</h1> <h3>by Rick Berman, Michael Piller, Jeri Taylor</h3> <p class="excerpt">Pulled to the far side of the Galaxy, where the Federation is 75 years away at maximum warp speed, a Starfleet ship must cooperate with Maquis rebels to find a way home.</p> <input type="radio" data-rate="1" name="rating-4" class="rating--star-4" /> <input type="radio" data-rate="2" name="rating-4" class="rating--star-4" /> <input type="radio" data-rate="3" name="rating-4" class="rating--star-4" checked/> <input type="radio" data-rate="4" name="rating-4" class="rating--star-4" /> <input type="radio" data-rate="5" name="rating-4" class="rating--star-4" /> </div>
</article>
<footer class="credits"> <p>Images and Descriptions taken from <a href="http://www.imdb.com/">IMDB</a>. Icons via <a href="http://weloveiconfonts.com">We Love Icon Fonts</a> (entypo Set). Movies made by awesome people. HTML & CSS by myself (who'd have expected that?)</p>
</footer>
</body>
</html>

Custom Rating buttons with Icon Fonts - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
.rating--box { letter-spacing: -0.31em;
}
.cover, .meta { display: inline-block; letter-spacing: 0; vertical-align: top;
}
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font: 1em/1.65 Arial, Helvetica, sans-serif; background: #333;
}
a { color: #5CA3E6;
}
a:hover { color: #97C0E6;
}
.rating--box { width: 100%; max-width: 40em; height: auto; background: #fff; margin: 2.5em auto; padding: 1em; box-shadow: 0 0 5px black; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
.cover { width: 40%; height: auto;
}
.cover img { max-width: 100%; padding-right: 1rem;
}
.meta { width: 59%;
}
.meta p { line-height: 1.3; margin-bottom: 1.5em;
}
input[type=radio] { -moz-appearance: none; -webkit-appearance: none;
}
input[type=radio]:hover { cursor: pointer;
}
.rating--star { color: #ff7711;
}
.rating--star:before { content: "\2605"; font-size: 2em; font-family: entypo, sans-serif;
}
.rating--star:checked ~ :before { content: "\2606";
}
.rating--star:focus { outline: 0;
}
.rating--star-2 { color: #cc0000;
}
.rating--star-2:before { content: "\2665"; font-size: 2em; font-family: entypo, sans-serif;
}
.rating--star-2:checked ~ :before { content: "\2661";
}
.rating--star-2:focus { outline: 0;
}
.rating--star-3 { color: #cc0000;
}
.rating--star-3:before { content: "\1f3c6"; font-size: 2em; font-family: entypo, sans-serif; color: #eda304;
}
.rating--star-3:checked ~ :before { content: "\1f3c6"; color: #262626;
}
.rating--star-3:focus { outline: 0;
}
.rating--star-4 { color: #cc0000;
}
.rating--star-4:before { content: "\1f680"; font-size: 2em; font-family: entypo, sans-serif; color: #eda304;
}
.rating--star-4:checked ~ :before { content: "\1f680"; color: #262626;
}
.rating--star-4:focus { outline: 0;
}
.credits { width: 100%; max-width: 50em; margin: 1.5em auto 0 auto; background: white; padding: 1em 1.5em;
}
@media all and (max-width: 40em) { body { padding: 1.5em; } .cover { width: 100%; height: 15em; overflow: hidden; display: block; } .cover img { width: 100%; } .meta { width: 100%; max-width: 50em; } .meta p { line-height: 1.3; margin-bottom: 1.5em; }
}
Custom Rating buttons with Icon Fonts - Script Codes
Custom Rating buttons with Icon Fonts - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 3.5
Size 5,022 Kb
Views 30,360
Do you need developer help for Custom Rating buttons with Icon Fonts?

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!

Kevin Gimbel (kevingimbel) Script Codes
Name
Slide Menu
Pure CSS3 single element Link from TLOZ
CSS3 only Aperture Science Retro Logo
Pinterest Thumb
CSS3 only Turret from Portal
LazyLoad.js Example
Chat UI - WIP
An Object-Oriented ToDo-List
CSS Pre-Block Overflow example
A Pen by Kevin Gimbel
Create amazing love letters 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!