This question already has answers here:
Clickable icon with link
(3 answers)
Closed 4 years ago.
I've made a social media icon list for my webpage but I don't know how to insert a link in them so they take you somewhere when clicking... I've tried using the "a" tag but it's not working:
<div class="leftside">
<ul class="socialmediaicons">
<li><i class="fa
fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
I've only tried on the facebook icon and it doesn't work, what am doing wrong?
Its working now
<div class="leftside">
<ul class="socialmediaicons">
<li><a target="_blank" href="https://www.facebook.com/EnUnChasquido" rel="http://www.facebook.com/">Facebook<i class="fa
fa-facebook"></i></a></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
Simple use like this
<div class="leftside">
<ul class="socialmediaicons">
<a href="https://www.facebook.com/EnUnChasquido"><li><i class="fa
fa-facebook"></i></li></a>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
</div>
Wrap the entire i tag within the anchor tag
Jsfiddle link: https://jsfiddle.net/VrtuosArs/14x0rbtb/
Hope the following code snippet solves your problem
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="leftside">
<ul class="socialmediaicons">
<li><a href="https://www.facebook.com/EnUnChasquido" target="_blank"><i class="fa
fa-facebook"></i></a></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><a href="https://www.youtube.com" target="_blank"><i class="fa fa-youtube"></i></li>
</ul>
</div>
The anchor element tag is the letter “a” surrounded by angle brackets like this: . Both the opening and closing attributes are required, and all of the content between the tags makes up the anchor source. If we want to use just a single word as an anchor, we wrap just that one word in anchor tags. we can use text, image, icons as content
Related
I am Coding a website and i am incorporating font awesome icons but even though I have added the link-tag at the top of the page it won't show me the icons
This is the link I Added
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
This is how I incorporated it
<div class="billboard-social-icons">
<ul class="social-icons-white">
<li class="social-icon"><i class="fab fa-facebook-f"></i></li>
<li class="social-icon"><i class="fab fa-twitter"></i></li>
<li class="social-icon"><i class="fab fa-instagram"></i></li>
<li class="social-icon"><i class="fab fa-behance"></i></li>
<li class="social-icon"><i class="fab fa-dribbble"></i></li>
</ul>
</div><!-- billboard-social-icons Ends Here -->
Here is a CDN if you want to use. There might be some issue with the css file you are adding.
<div class="billboard-social-icons">
<ul class="social-icons-white">
<li class="social-icon"><i class="fa fa-facebook-f"></i></li>
<li class="social-icon"><i class="fa fa-twitter"></i></li>
<li class="social-icon"><i class="fa fa-instagram"></i></li>
<li class="social-icon"><i class="fa fa-behance"></i></li>
<li class="social-icon"><i class="fa fa-dribbble"></i></li>
</ul>
</div><!-- billboard-social-icons Ends Here -->
<script src="https://use.fontawesome.com/50a7448982.js"></script>
I have web page with multiple hyperlinks. These hyperlinks are loaded from database so can be many of them (multiple pages). My problem - i need to keep top green ribbon in same height. But currently if all elements not fit to screen they line up and that makes my green ribbon quite big.
Code: HTML
`
<body>
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li><li><i class="fa fa-pencil-square-o fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 1</strong></li><li><i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 2</strong></li><li><i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Click 3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
</body>
`
Would it be possible to create something like little triangle and move those links (just overflowed) in? Or any ideas how to keep those in one line (but not with scroll)?
I am new in web development. I have downloaded a free template with all sources and trying to change it for having some experience. When i run the template, the fa fa-facebook, fa fa-twitter etc icons are showing codes like f0 98 etc in square and the icons of facebook and twitter are not showing. Kindly help!.
Here is the code to link font-awsome
<link rel="stylesheet" type="text/css" href="libraries/fonts/font-awesome.min.css">
here is the code
<!-- Header Socials -->
<div class="col-md-4 col-sm-12 col-xs-12 header-socials">
<ul class="no-padding">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-pinterest"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
<i class="fa fa-user"></i>Contact Us
</div><!-- / Header Socials -->
Regards!
Akhtar
It doesn't sound like you have fully implemented Font Awesome
Try putting this inside <head>:
<script src="https://use.fontawesome.com/08a9781b65.js" type="text/javascript"></script>
now how can i add my own img for a UI list (nav bar)?
Im trying to add my own icon/imgs for each ul list
my current code:
<li> <i class="fa fa-car"></i> אזורי חלוקה</li>
<img src="images/United-States-Flag-24.png" alt="US ENG" title="US English" />
<li> <i class="fa fa-envelope-o"></i> צור קשר</li>
<li><i class="fa fa-shopping-cart"></i> חנות</li>
Here is an example from the font awesome page:
http://fortawesome.github.io/Font-Awesome/examples/
first your code above does not include the ul tag, not sure if you forgot it or did not include it
the use of <i> tags is right, but maybe you did not included the font awesome in your header?
try this example and see if you get the icons to appear. I can edit this base on your feedback
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
I am trying to create animated menu from the reference of 'codepen' but i don't understand the code written below can someone help me, its the first time i saw the code like this, its looks like selector but cant help it to understand
HTML :
<div id="wrapper">
<div class="mobile">
<!-- Checkbox to tonggle the menu -->
<input type="checkbox" id="tm"/>
<ul class="sidenav">
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-windows"></i></li>
<li><i class="fa fa-android"></i></li>
<li><i class="fa fa-dribbble"></i></li>
<li><i class="fa fa-tumblr"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-dropbox"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-vimeo"></i></li>
<li><i class="fa fa-skype"></i></li>
</ul>
<!-- Content area -->
<section>
<!-- Label for #tm checkbox -->
<label for="tm">Menu</label>
</section>
#ID:checked~section{
}
It means inside particular ID, if the check box is checked then its section(sibling) must have following properties
tilde(~) is a general sibling combinator
For more Information Check this link