Icon List

Developer
Szpakoli
Size
2,941 Kb
Views
2,024
  1. Icon List Previews
  2. Icon List HTML Codes
  3. Icon List CSS Codes

How do I make an icon list?

Testing out some icon list action. What is a icon list? How do you make a icon list? This script and codes were developed by Szpakoli on 03 February 2023, Friday.

Icon List Previews
IQ Test

Icon List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icon List</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid"> <div class="card card--pop"> <ul> <li data-icon="local_pizza">item 01</li> <li data-icon="menu">item 02</li> <li data-icon="pricing">item 03</li> <li data-icon="launch">item 04</li> <li data-icon="error">item 05</li> </ul> </div> <div class="card card--pop"> <ul> <li data-icon="local_pizza">item 01</li> <li data-icon="menu">item 02</li> <li data-icon="pricing">item 03</li> <li data-icon="launch">item 04</li> <li data-icon="error">item 05</li> </ul> </div>
</div>
</body>
</html>

Icon List - Script Codes CSS Codes

body { margin: 50px;
}
.card { margin-bottom: 2em; padding: 30px; flex-grow: 1; margin: 10px;
}
.card--pop { background: #fff; color: #212121; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); border-radius: 3px; position: relative;
}
ul { list-style-type: none; margin: 0 0 0 20px; padding: 0;
}
li { padding: 7px 0; border-bottom: 1px solid #d3d3d3; color: #0078ae; font-size: 17px;
}
[data-icon]:before,
.material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; speak: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga"; margin-left: -22px;
}
[data-icon]:before { vertical-align: middle; margin-right: 0.333333333em;
}
[data-icon="local_pizza"]:before { content: "\e552";
}
[data-icon="menu"]:before { content: "\e5d2";
}
[data-icon="pricing"]:before { content: "\e227";
}
[data-icon="launch"]:before { content: "\e895";
}
[data-icon="error"]:before { content: "\e000";
}
.grid { -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; text-align: left; vertical-align: middle; list-style: none; display: -webkit-flex; -webkit-flex-flow: row wrap; display: -ms-flexbox; -ms-flex-flow: row wrap; display: flex; flex-flow: row wrap; justify-content: space-between;
}
Icon List - Script Codes
Icon List - Script Codes
Home Page Home
Developer Szpakoli
Username szpakoli
Uploaded February 03, 2023
Rating 3
Size 2,941 Kb
Views 2,024
Do you need developer help for Icon List?

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!

Szpakoli (szpakoli) Script Codes
Name
Responsive Grid
Simple Slide Nav
GSAP SVG Loading Spinner
Fancy Horizontal Rules
Wired Style Hover Links
Sample Preloader
Bootstrap Accordion test
Bootstrap Sticky Header and Search Bar
JSTree Test
A Pen by szpakoli
Create amazing sales emails 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!