Font awesome icons won't show - html

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

Auto hide <ul> listing on load using jQuery

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>

Insert link in a social media icon [duplicate]

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

How to align partial text to right side in html dropdown menu for marking a subdropdown

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>&nbsp [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>&nbsp [Relatics.Portallink Sequence='411' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='412' Get='Name'] </li>
<li><i class="fa fa-list-ol fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='413' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-chain-broken fa-2x" aria-hidden="true"></i>&nbsp [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>&nbsp [Relatics.Portallink Sequence='421' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='422' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-exchange fa-2x" aria-hidden="true"></i>&nbsp [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>&nbsp [Relatics.Portallink Sequence='431' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>&nbsp [Relatics.Portallink Sequence='432' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-puzzle-piece fa-2x" aria-hidden="true"></i>&nbsp [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>&nbsp [Relatics.Portallink Sequence='441' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>&nbsp [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>

HTML if url present export as href link

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

How to get proper alignment for font awesome icons with Bootstrap Nav bar links?

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>