HTML if url present export as href link - html

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

Related

Font awesome icons won't show

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>

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>

Minimize html links when does not fit in screen

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)?

can someone tell me the meaning of #id:checked~section{} in css3

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