Bulleted list with font-icon snippet

Developer
Tom Hermans
Size
2,452 Kb
Views
16,192
  1. Bulleted list with font-icon snippet Previews
  2. Bulleted list with font-icon snippet HTML Codes
  3. Bulleted list with font-icon snippet CSS Codes

How do I make an bulleted list with font-icon snippet?

Change your regular bullet, with a font icon instead of a bitmap image or sprite.. What is a bulleted list with font-icon snippet? How do you make a bulleted list with font-icon snippet? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

Bulleted list with font-icon snippet Previews
IQ Test

Bulleted list with font-icon snippet - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bulleted list with font-icon snippet</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h2>Bulleted list with Font-Icon - snippet</h2>
<div class="narrowcolumn"> <ul class="list"> <li><a href="" title="">ENSA position on Danish recommendation on rice products for children</a></li> <li><a href="">ENSA statement on the opinion issued by Anses in France on drinks of babies</a></li> <li><a href="">ENSA position on FAO report on dietary protein quality evaluation in human nutrition</a></li> <li><a href="">Newsletter 2012 Week of Soya</a></li> </ul>
</div>
<div class="desc-column"> Bullet replaced with a font-icon glyph, in this case a FontAwesome icon. <br />Also note how the multiple lines in the LI align nicely.
</div
</body>
</html>

Bulleted list with font-icon snippet - Script Codes CSS Codes

body { font-family: sans-serif; margin: 0 auto; width: 960px; line-height: 1.5em;
}
.narrowcolumn { width: 25%; padding: 12px; background: GreenYellow; float: left;
}
.list, .desc { margin-bottom: 0; margin-left: 12px; padding: 0; list-style: none;
}
.list li, .desc li { padding-bottom: 0.375em; padding-left: 12px;
}
.list li:before, .desc li:before { content: "\f105"; font-family: "FontAwesome"; margin: 0 12px 0 -18px;
}
.desc-column { float: left; width: 70%; padding: 12px;
}
Bulleted list with font-icon snippet - Script Codes
Bulleted list with font-icon snippet - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 2,452 Kb
Views 16,192
Do you need developer help for Bulleted list with font-icon snippet?

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!

Tom Hermans (tomhermans) Script Codes
Name
StickyNav
CSS Solar system animation
Taming data tables
Sticky Navigation
Tryout
Snappy snippet try
CSS Kwicks
Table Row Toggle
Styled selectbox
CSS3 Shapes reference
Create amazing marketing copy 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!