<div class="item slides">
<div class="slide-12"></div>
<div class="hero3">
<h1>Reach out at</h1>
<a href="https://www.linkedin.com/in/sowmiya-nagarajan/"
class="fa fa-linkedin"></a>
<a href="https://github.com/strangest-quark" class="fa fa-
github"></a>
<a href="https://www.snapchat.com/add/strangely-quark"
class="fa fa-snapchat-ghost"></a>
<a href="https://www.facebook.com/nagarajan.sowmiya"
class="fa fa-facebook"></a>
<a href="https://www.instagram.com/strange._.quark/"
class="fa fa-instagram"></a>
</div>
</div>
The hyperlinks in the above code snippet are not clickable. It could be a problem of another overlapping div. The links work when I use tab.
I tried z-index in different combinations, but none of them seem to work!
Find the complete html and css file in the following links:
CSS
HTML
Any help appreciated.
I added some text inside the anchor tags. But it seems you are needing to show them just as Font Awesome icons. In that case a single space character will be enough. Or well a
<div class="hero3">
<h1>Reach out at</h1>
<a href="https://www.linkedin.com/in/sowmiya-nagarajan/"
class="fa fa-linkedin"> sowmiya-nagarajan</a>
<a href="https://github.com/strangest-quark" class="fa fa-
github"> strangest-quark</a>
<a href="https://www.snapchat.com/add/strangely-quark"
class="fa fa-snapchat-ghost"> strangely-quark</a>
<a href="https://www.facebook.com/nagarajan.sowmiya"
class="fa fa-facebook"> </a>
<a href="https://www.instagram.com/strange._.quark/"
class="fa fa-instagram"> </a>
</div>
The links have no content inside them. What you can do if you want icon only links is to put the fa-* classes on a span or i tag inside the a tag like so:
<a href="https://example.com" >
<span class="fa fa-linkedin"></span>
</a>
This then causes the a tag to actually have content and be clickable.
Related
I bought a webpage ( files ) and on some website hosting providers it works, on others it doesn't.
And was wondering if any of you can point me in the right direction on how to change the index.html content to display the correct background image.
The webpage is static, divided into sections, having the below structure for the sidebar which hides/shows different section, with different background image.
<div class="inner">
<nav id="tmMainNav" class="tm-main-nav">
<ul>
<li>
<a href="#intro" id="tmNavLink1" class="scrolly active" data-bg-img="images/Homepage.png" data-page="#tm-section-1">
<i class="fas fa-home tm-nav-fa-icon"></i>
<span>Introduction</span>
</a>
</li>
<li>
<a href="#products" id="tmNavLink2" class="scrolly" data-bg-img="images/Portofolio.jpg" data-page="#tm-section-2" data-page-type="carousel">
<i class="fas fa-map tm-nav-fa-icon"></i>
<span>Projects</span>
</a>
</li>
<li>
<a href="#company" id="tmNavLink3" class="scrolly" data-bg-img="images/Projects.png" data-page="#tm-section-3">
<i class="fas fa-users tm-nav-fa-icon"></i>
<span>Qualifications</span>
</a>
</li>
<li>
<a href="#contact" id="tmNavLink4" class="scrolly" data-bg-img="images/Contact.jpg" data-page="#tm-section-4">
<i class="fas fa-comments tm-nav-fa-icon"></i>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
How should I change "data-bg-img="images/Homepage.png" " to actually render background-image ?
I think if it was possible, would have been awesome, to put into the CSS at the top of the page, in the style, all the background images, and somehow to trigger the one for which the section is currently viewed.
The sections are called from this:
<!-- section 1 -->
<section id="tm-section-1" class="tm-section">
<div class="ml-auto">
<div class="myDiv">
<header class="mb-4"><h1 class="tm-text-shadow"><strong> greetings </strong></h1></header>
Continue
<!-- data-nav-link holds the ID of nav item, which means this link should behave the same as that nav item -->
</div>
</div>
</section>
I have some awesome icons that I would like to direct to a link when clicked. I tried wrapping them in anchor tags, but that doesn't work for some reason, what can I do? I tried two implementations.
First one
<a href ="Login.php">
<li class="nav-item border rounded-circle mx-2 cart-icon">
<i class="fas fa-shopping-cart p-2"></i>
</li>
</a>
Second one
<li class="nav-item border rounded-circle mx-2 cart-icon">
<i class="fas fa-shopping-cart p-2"></i>
</li>
Remove the list, it's not needed
<html>
<head>
<script src="https://kit.fontawesome.com/2442adcce2.js" crossorigin="anonymous"></script>
</head>
<body>
<a href ="https://www.w3schools.com">
<i class="fas fa-shopping-cart p-2"></i>
</a>
</body>
</html>
This works perfectly, feel free to reply if it doesn't work. I've tested it to make sure.
I'm trying to display two links. But when I use the correct indentation the second link renders whitespace in front of the icon. Why does this happen? And is there a way to prevent it without using hardly readable code?
Creates whitespace:
<a href="...">
<i class="fa fa-pencil-square-o fa-lg"/>
</a>
<a href="...">
<i class="fa fa-trash fa-lg"/>
</a>
Creates no whitespace:
<a href="...">
<i class="fa fa-pencil-square-o fa-lg"/>
</a>
<i class="fa fa-trash fa-lg"/>
Here is my jsfiddle link: http://s30.postimg.org/44jynnz35/Untitled_2.png
Now it shows like this http://s30.postimg.org/44jynnz35/Untitled_2.png
I need vertically align one-by-one.
<div id="social-bar">
<a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
<i class="icon icon-facebook"></i>
<span>Facebook</span>
</a>
<a href="https://twitter.com/moo9000">
<i class="icon icon-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://plus.google.com/103323677227728078543/">
<i class="icon icon-google-plus"></i>
<span>Google Plus</span>
</a>
<a href="http://opensourcehacker.com/">
<i class="icon icon-rss"></i>
<span>Blog</span>
</a>
</div>
May i know, What is the exact css property to fix this?
Thanks in advance.
Anchors are, by default, inline. Use this in your CSS:
#social-bar a {
display:block;
}
I am building a site with Zurb's Foundation framework. I have a side navigation that is working fine in every browser except IE (of course). In IE, if you try to click a sidebar link, it does not work if you try to click the text. If you click the box around the text or the icon, it works. I'm guessing this has something to do with the weird way that IE treats <label> tags, but I'm not sure how to fix it. Anyone know what I should do to get the links working?
Here is a fiddle.
<!-- Sidebar Navigation -->
<div class="sidebar left clearfix">
<div class="icon-bar vertical five-up label-right left clearfix">
<a class="item" id="home">
<i class="fa fa-home fa-2x fa-fw"></i>
<label>Home</label>
</a>
<a class="item" id="resources">
<i class="fa fa-folder-open fa-2x fa-fw"></i>
<label>Resources</label>
</a>
<a class="item" id="reports">
<i class="fa fa-pie-chart fa-2x fa-fw"></i>
<label>Reports</label>
</a>
<a class="item" id="team">
<i class="fa fa-users fa-2x fa-fw"></i>
<label>Team</label>
</a>
<a class="item" id="support-tickets">
<span class="notification-container">
<i class="fa fa-envelope fa-2x fa-fw"></i>
<span class="notification-counter">1</span>
<label>Support Tickets</label>
</span>
</a>
<!-- These Last 2 Items to Be Displayed Only On Certain Pages as Necessary -->
<a class="item" id="director-info">
<i class="fa fa-shield fa-2x fa-fw"></i>
<label>Director Info</label>
</a>
<a class="item" id="merge-accounts">
<i class="fa fa-compress fa-2x fa-fw"></i>
<label>Merge Account</label>
</a>
</div>
</div>
<!-- End Sidebar -->
I should mention that it apparently works if I remove the <label> tag, but then my CSS gets messed up. Wondering if there's an easier fix.
I was having the same issue using the foundation Icon Bar.
Try using pointer-events: none on your labels like so
.item label {
pointer-events: none;
}