Icon List

Developer
Michael Chernin
Size
1,701 Kb
Views
10,120
  1. Icon List Previews
  2. Icon List HTML Codes
  3. Icon List CSS Codes

How do I make an icon list?

What is a icon list? How do you make a icon list? This script and codes were developed by Michael Chernin on 19 January 2023, Thursday.

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" href="css/style.css">
</head>
<body> <div class="container"> <figure class="icon1"> <img src="http://www.wbais.net/uploaded/news_images/nurse.png" alt="" /> <figcaption><a href="#">Icon1</a></figcaption> </figure> <figure class="icon2"> <img src="http://www.wbais.net/uploaded/news_images/nurse.png" alt="" /> <figcaption><a href="#">Icon2</a></figcaption> </figure> <figure class="icon3"> <img src="http://www.wbais.net/uploaded/news_images/nurse.png" alt="" /> <figcaption><a href="#">Icon3</a></figcaption> </figure> <figure class="icon4"> <img src="http://www.wbais.net/uploaded/news_images/nurse.png" alt="" /> <figcaption><a href="#">Icon4</a></figcaption> </figure> <figure class="icon5"> <img src="http://www.wbais.net/uploaded/news_images/nurse.png" alt="" /> <figcaption><a href="#">Icon5</a></figcaption> </figure> <figure class="icon6"> <img src="http://www.wbais.net/uploaded/news_images/nurse.png" alt="" /> <figcaption><a href="#">Icon6</a></figcaption> </figure>
</div>
</body>
</html>

Icon List - Script Codes CSS Codes

.container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
figure { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
img { width: 50px;
}
figcaption { text-align: center;
}
a { text-decoration: none; color: #000; font-family: sans-serif;
}
Icon List - Script Codes
Icon List - Script Codes
Home Page Home
Developer Michael Chernin
Username mchernin34
Uploaded January 19, 2023
Rating 3
Size 1,701 Kb
Views 10,120
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!

Michael Chernin (mchernin34) Script Codes
Name
Image grid with captions
Card Flipping Effect
Popover Navigation
Animated card
Starter Portfolio
Column Drop
A Pen by Michael Chernin
Teachers Apps
Mostly Fluid
Icon Grid
Create amazing web 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!