CSS Link Icons with jQuery Titles

Developer
Nic
Size
2,312 Kb
Views
14,161

How do I make an css link icons with jquery titles?

Setting link icons with css :after and title text with jQuery. What is a css link icons with jquery titles? How do you make a css link icons with jquery titles? This script and codes were developed by Nic on 22 November 2022, Tuesday.

CSS Link Icons with jQuery Titles Previews
IQ Test

CSS Link Icons with jQuery Titles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Link Icons with jQuery Titles</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>CSS Link Icons with jQuery Titles</h1>
<div class="box"> <h2>Forms</h2> <ul class="links-pdf"> <li><a href="#">number 1</a></li> <li><a href="#">number 2</a></li> <li><a href="#">number 3</a></li> <li><a href="#">number 4</a></li> </ul>
</div>
<div class="box"> <h2>Forms</h1> <h3>1 missing link</h3> <ul class="links-pdf"> <li><a href="#">number 1</a></li> <li>number 2</li> <li><a href="#">number 3</a></li> <li><a href="#">number 4</a></li> </ul>
</div>
<div class="box"> <h2>Paragraph</h2> <p>Duis ac commodo leo. Sed mauris dui, volutpat sed ipsum et, ornare elementum neque. <a class="link-external" href="google.com">Click for a good time.</a> Nulla lacinia consectetur ante ut dapibus.</p>
</div>
<div class="box"> <h2>Links</h2> <h3>1 Oddball</h3> <ul class="links-external"> <li><a href="#">number 1</a></li> <li><a href="#">number 2</a></li> <li>number 3</li> <li><a class="link-word oddball" href="#">number 4</a></li> <li><a href="#">number 5</a></li> </ul>
</div>
<div class="box"> <h2>Links</h2> <h3>2 Oddballs</h3> <ul class="links-external"> <li><a href="#">number 1</a></li> <li><a href="#">number 2</a></li> <li>number 3</li> <li><a class="link-word oddball" href="#">number 4</a></li> <li><a class="link-pdf oddball" href="#">number 5</a></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Link Icons with jQuery Titles - Script Codes CSS Codes

ul.links-external a:after,
a.link-external:after,
a.link-external.oddball:after { content: ' \f08e'; font-family: fontawesome;
}
ul.links-pdf a:after,
a.link-pdf:after,
a.link-pdf.oddball:after { content: ' \f1c1'; font-family: fontawesome;
}
ul.links-word a:after,
a.link-word:after,
a.link-word.oddball:after { content: ' \f1c'; font-family: fontawesome;
}
.box { float: left; width: 40vh; border: 1px solid; margin: 2%; padding: 2%; border-radius: 10px; background-color: #ddd; min-width: 100px; height: 40vh; font-size: 3vmin;
}

CSS Link Icons with jQuery Titles - Script Codes JS Codes

$(document).ready(function() { $('.link-pdf').attr('title', "Link to a PDF").attr('aria-label', "PDF Icon"); $('a', '.links-pdf').attr('title', "Link to a PDF").attr('aria-label', "PDF Icon"); $('.link-external').attr('title', "External Link").attr('aria-label', "External Link Icon"); $('a', '.links-external').attr('title', "External Link").attr('aria-label', "External Link Icon"); $('.link-word').attr('title', "Link to a Word Document").attr('aria-label', "Microsoft Word Icon"); $('a', '.links-word').attr('title', "Link to a Word Document").attr('aria-label', "Microsoft Word Icon");
});
CSS Link Icons with jQuery Titles - Script Codes
CSS Link Icons with jQuery Titles - Script Codes
Home Page Home
Developer Nic
Username nicwinn
Uploaded November 22, 2022
Rating 3
Size 2,312 Kb
Views 14,161
Do you need developer help for CSS Link Icons with jQuery Titles?

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!

Nic (nicwinn) Script Codes
Name
Foundation 6.2.3 data-equalizer
Foundation 6.1.1 button bug
Accordion
A Pen by nic
UTHSC Mission Icon Set
Bottom Navigation
Foundation
Block grid flow test
Foundation 6.2.0 data-equalizer
Focus on first input
Create amazing blog posts 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!