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>
Related
How can I automatically show this listing collapsed without modifying the HTML structure? This means I want to collapse all the folders of the tree.
And initially, instead of showing this:
I want to this:
This is my try with no luck:
$('#master-ul').hide()
$('#master-ul').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul>
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>
PS: There can be more than one root folder. This means that having more than one first_folder in the example.
Why don't use css then use jq for change that?
$('#master-ul').on('click', 'li', function() {
$('#secondlvl').slideToggle();
return false
});
$('.folder').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
#master-ul li ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul id='secondlvl'>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul id="thirdlvl">
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>
Edit:
Add #secondlvl for control the first slideToggle()
Additional:
If you don't want secondlvl id you can use $('#master-ul > li > ul').slideToggle(); instead of $('#secondlvl').slideToggle(); for slide the first ul.
$('#master-ul').on('click', 'li', function() {
$('#master-ul > li > ul').slideToggle();
return false
});
$('.folder').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
#master-ul li ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul id="thirdlvl">
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>
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
I would like to create a marker for a subdropdown menu.
I created the following;
I have inserted an icon of font-awesome to show that there is a next level submenu. This icon I want to align to the right, what is the best way to go? Adding a class in CSS or just use align="right"?
Here is the code:
<div class="menuSection">
<div class="menuItem" rendercondition="[Relatics.Portallink Sequence='410' Get='Visibility' ExpectedResult='Visible']">
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-random fa-3x" aria-hidden="true"></i><br> [Relatics.Portallink Sequence='400' Get='Name']</button>
<div class="dropdown-content">
<ul>
<li><i class="fa fa-bolt fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='410' Get='Name'] <i class="fa fa-play-circle fa-1x">
<ul>
<li><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='411' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='412' Get='Name'] </li>
<li><i class="fa fa-list-ol fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='413' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-chain-broken fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='420' Get='Name'] <i class="fa fa-play-circle fa-1x">
<ul>
<li><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='421' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='422' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-exchange fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='430' Get='Name'] <i class="fa fa-play-circle fa-1x">
<ul>
<li><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='431' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='432' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-puzzle-piece fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='440' Get='Name'] <i class="fa fa-play-circle fa-1x">
<ul>
<li><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='441' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='442' Get='Name'] </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Adding a class and using float: right; in the css seems like the best way to me.
.listitem {
background: yellow;
width: 200px;
}
.icon {
float: right;
}
<div class="listitem">List item<i class="icon">Icon</i></div>
I"m working on a wordpress site and I don't have much experience with php. On wordpress you can enter a url for the site. I need help with creating an if statement as if a url is present the links to the url entered in on wordpress.
How does it works in wordpress when a user can input a url on different icons. If they do the icon needs to be clickable like href.
Here is the code:
<div id="legend">
<div class="text-center">
<p>As we continue to track performance and goal achievement, TBD spaces will be filled in with <br />content meant to support and react to continuing progress and opportunities.</p>
<ul>
<li class="oem-event"><span>OEM Event</span></li>
<li class="fa-icon"><i class="fa fa-search" aria-hidden="true"></i> Research</li>
<li class="fa-icon"><i class="fa fa-check-circle" aria-hidden="true"></i> Audit</li>
<li class="fa-icon"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Planning</li>
<li class="fa-icon"><i class="fa fa-car" aria-hidden="true"></i> Inventory</li>
<li class="fa-icon"><i class="fa fa-commenting" aria-hidden="true"></i> Blog</li>
</ul>
<ul>
<li class="fa-icon"><i class="fa fa-balance-scale" aria-hidden="true"></i> Comparison</li>
<li class="fa-icon"><i class="fa fa-link" aria-hidden="true"></i> Sitelink</li>
<li class="fa-icon"><i class="fa fa-window-maximize" aria-hidden="true"></i> Landing Page</li>
<li class="fa-icon"><i class="fa fa-cog" aria-hidden="true"></i> Custom</li>
<li class="fa-icon"><i class="fa fa-plus-circle" aria-hidden="true"></i> Social Post</li>
<li class="fa-icon"><i class="fa fa-folder" aria-hidden="true"></i> Migration </li>
<li class="fa-icon"><i class= "fa fa-font-awesome" aria-hidden="true"></i> Enhancement </li>
<li class="fa-icon"><i class="fa fa-certificate" aria-hidden="true"></i> WOW </li>
<li class="fa-icon"><i class= "fa fa-google" aria-hidden="true"></i>Google Post</li>
</ul>
</div>
</div>
I've tried this so far:
<?php
// The Regular Expression filter
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
// The Text you want to filter for urls
$text = "The text you want to filter goes here. http://google.com";
// Check if there is a url in the text
if(preg_match($reg_exUrl, $text, $url)) {
// make the urls hyper links
echo preg_replace($reg_exUrl, "{$url[0]} ", $text);
} else {
// if no urls in the text just return the text
echo $text;
}
?>
However I don't think this is the right thing for what I need to do
Live example http://jsbin.com/wupume/1/edit
HTML
<ul class="fa-ul nav nav-sidebar">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>
According to this font-awesome example page we can use icons with unordered list but when I try to use with anchor links <a href=#"> and .nav class too icon placement is not proper.
I want to know if there is any way to have proper alignment without writing custom css.
Here's what I came up with. It seems that fa-ul and nav nav-whatever do not cooperate. I removed the fa-ul from the <ul> tag and added in nav nav-pills nav-stacked to make a vertical list. Then, I also removed fa-li from the <a> tags and everything seems to align properly:
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
<li><i class="fa fa-check-square"></i> List icons</li>
</ul>
</div>
And the Bootply:
Bootply - Nav with FA Icons
Hope that helps!
A simpler solution would have been to use the fixed width class fa-fw instead of fa-ul and fa-li.
So the HTML markup would become:
<ul class="nav nav-sidebar">
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
<li><i class="fa-fw fa fa-check-square"></i>List icons</li>
</ul>
Live example: jsbin
Remove Nav
<ul class="fa-ul nav-sidebar">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>