CSS Link Icons with jQuery Titles
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 - 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");
});
Developer | Nic |
Username | nicwinn |
Uploaded | November 22, 2022 |
Rating | 3 |
Size | 2,312 Kb |
Views | 14,168 |
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!
Name | Size |
Foundation 6.2.3 data-equalizer | 2,101 Kb |
Bottom Navigation | 24,832 Kb |
UTHSC Mission Icon Set | 1,835 Kb |
Foundation | 1,476 Kb |
Focus on first input | 3,422 Kb |
Foundation 6.1.1 button bug | 1,590 Kb |
Accordion | 3,455 Kb |
A Pen by nic | 1,586 Kb |
Foundation 6.2.0 data-equalizer | 2,065 Kb |
Block grid flow test | 1,852 Kb |
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!
Name | Username | Size |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Knockout Lists | Marinru | 2,531 Kb |
Asteroids | Davedehaan | 2,846 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!