I have html website. in this Website added Profile Page . Profile have Socila Icon . i have added Linkdin page in my Profile page Like
<a href="#" class="social-icon si-rounded si-small si-linkedin">
<i class="icon-linkedin"></i>
<i class="icon-linkedin"></i>
</a>
how To make Icon Clickable to Redirect Linkdin page Profile pag?
Replace the # in your <a href="#" ... with the URL for your profile page.
<a href="https://linkedin.com/your/profile/url" class="social-icon si-rounded si-small si-linkedin">
<i class="icon-linkedin"></i>
<i class="icon-linkedin"></i>
</a>
Your Code is Funtastic But You Not Give Link Please Give a Link Look Like me
replace the # symbol in your < a href="#" class="social-icon si-rounded si-small si-linkedin" > attribute tag with the URL of the Facebook account/page.
Place the URL of your LinkedIn profile in the href of <a>.
<a href="https://linkedin.com/your/profile/url" class="social-icon si-rounded si-small si-linkedin">
<i class="icon-linkedin"></i>
</a>
<a href="https://in.linkedin.com/in/raru-chempazhanthy-43549623" class="social-icon si-rounded si-small si-linkedin" target="_blank">
<i class="icon-linkedin"></i>
<i class="icon-linkedin"></i>
</a>
Here this will open a new tab, where the linkedin profile is shown. Thank You
Your code is right, you just need to set the href of your link (a), to the url of your page, ex <a href="https://www.linkedin.com/in/bill-nye-science-guy-9488063b" class="social-icon si-rounded si-small si-linkedin">
Also, you have 2 images inside of the link, so unless it's like that for a reason I would recommend deleting one of the <i class="icon-linkedin"></i>'s
Read this for more info on links.
Related
I'm making changes to a navigation menu in a .vue file in my laravel application. I'm trying to link to an external url such as https://google.com but if I change the code to an link, the link doesn't show when I compile.
I've tried changing to router-link to an external website, but it didn't work. It tries to go to that as a page /https://google.com
<li class="nav-item" #click="closePanel">
<router-link class="nav-link" to="/campaigns">
<i class="fal fa-layer-group"></i>
<span>Campaigns</span>
</router-link>
</li>
<li class="nav-item" #click="closePanel">
<router-link class="nav-link" to="https://google.com">
<i class="fal fa-layer-group"></i>
<span>External website</span>
</router-link>
</li>
It seems like the only way is using
<li class="nav-item" #click="closePanel">
<a href="https://google.com" target="_blank" class="nav-link">
<i class="fal fa-layer-group"></i>
<span>External website</span>
</a>
</li>
One way would be using window.location.href . For e.g
<a href='redirectTo("https://google.com")'>Redirect to google</a>
And on methods defination of redirectTo
methods:{
redirectTo(url){
window.location.href=url;
}
}
You need to understand two things-
router-link doesn't consider external URLs.
router-link can wrap one element.
To fix this, you fill prop to with any value and use an anchor tag inside this, like below-
<li class="nav-item" #click="closePanel">
<router-link class="nav-link" to="https://google.com">
<a href="https://google.com">
<i class="fal fa-layer-group"></i>
<span>External website</span>
</a>
</router-link>
</li>
I work for this organization, Vibro, and I am website responsible. We have a sharing box with social icons on everyone of our articles. We want to add the text "del:" (Meaning share in norwegian) in front of the icons in the box. When I went into single.php and added a paragraph element with the text, the code won't be implemented.
Do you have any idea why, and how to fix it?
I've already tried: corrected syntax error, deleted cache and minified css, tried indenting with space and put the p element outside the ul. Does not work! Maybe the changes takes some time to be implemented, I made some changes earlier today that didn't go through before later.
Here's the code in single.php:
<div class="box-social">
<ul class="social social</ul>
<p>Del:</p>
<li>
<a class="circle-icon" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="circle-icon" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&summary=&source="><i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="circle-icon" target="_blank" href="https://twitter.com/home?status=<?php the_permalink(); ?>"><i class="fa fa-twitter" aria-hidden="true">
</i>
</a>
</li>
</ul>
</div>
The code you provided has invalid markup.
You can use something like this https://validator.w3.org/#validate_by_input to validate your html.
One issue with your code is Element p not allowed as child of element ul in this context.
I fixed the broken <ul> and moved the <p> before it.
<div class="box-social">
<p>Del:</p>
<ul class="social social">
<li>
<a class="circle-icon" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="circle-icon" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&summary=&source="><i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="circle-icon" target="_blank" href="https://twitter.com/home?status=<?php the_permalink(); ?>"><i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
My wordpress sites redirects to the wrong location. Go to www.theladieschampion.com
On the left side bar you have the option to click on social media links. When you click on the social media link instead of going to www.facebook.com/theladieschampion it goes to:
www.theladieschampion.com/www.facebook.com/theladieschampion
Why is the happening? Even when I create buttons that lead to links on mysite the links URL gets placed over the sites URL. Please Help
You must be using your anchor tag as
Facebook
Change this to
Facebook
your code should look like below:--
<div class="social-links">
<ul>
<li>
<a class="social fb" target="_blank" href="https://www.facebook.com/TheLadiesChampion/">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a class="social tw" target="_blank" href="https://twitter.com/theladieschamp_">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a class="social gg" target="_blank" href="https://plus.google.com/+TheLadiesChampionOfficial/posts">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>``
I just start up to be a web developer. Now I create a dynamic website for the first time. I don't know how to set class="active" to the navigation menu.
Here is my menu code:
<li>
<i class="fa fa-users fa-lg"></i> Create Patient
</li>
<?php } ?>
<li>
<i class="glyphicon glyphicon-list-alt fa-lg"> </i> List Patients
</li>
<?php if( $usertype == "Admin"){?>
<li>
<i class="fa fa-list fa-lg"> </i> List Users
</li>`
You can use $this->uri->segment();
<li>
</i> Create Patient
</li>
<?php } ?>
<li>
</i> List Patients
</li>
<?php if( $usertype == "Admin"){?>
<li>
</i> List Users
</li>
I do this on most projects. How I achieve this is like this;
<i class="glyphicon glyphicon-list-alt fa-lg"></i> List Patients
It's matching the current uri string, with the links href. If it matches, it add's an active class to the link.
Hope this helps.
I have also used site_url over base_url
Try this one. I think no need of javascript or jquery.
If you are using codeigniter then you can use URI Class.
Get the menu from url using
$this->uri->segment();
and apply to you code like below
<li>
<i class="glyphicon glyphicon-list-alt fa-lg <?php if($this->uri->segment(1)=="memu_name"){echo "active";}?>"> </i> List Patients
</li>
I have used Codeigniter URI Class $this->uri->segment();
Please look at my code:
<li class="<?=($this->uri->segment(1)==='technology')?'active':''?>">Tech</li>
Please note....
class="<?=($this->uri->segment(1)==='technology')?'active':''?>"
Also you can use URI Class $this->uri->uri_string()
Here is my active class for home page(index)
<li class="<?=($this->uri->uri_string()=== '')?'active':''?>">Home</li>
Contact Us
I am thinking to develop a plugin which creates Pinterest pinit button. I could not able to find the API for Pinterest Buttons. Can anybody tell how to find pinit button code?
Is pinterest providing API publicly?
Try this code
<img border="0" title="Pin It" src="http://assets.pinterest.com/images/PinExt.png">
My best solution, i attach the code with other social share
<div class="si-share noborder clearfix">
<div>
<a href="http://www.facebook.com/sharer.php?u=$AbsoluteLink" class="social-icon si-borderless si-facebook" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="https://twitter.com/share" class="social-icon si-borderless si-twitter" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<i class="icon-twitter"></i>
<i class="icon-twitter"></i>
</a>
<a href="javascript:void(0)" id="pinit" class="social-icon si-borderless si-pinterest" >
<i class="icon-pinterest"></i>
<i class="icon-pinterest"></i>
</a>
<a href="https://plus.google.com/share?url=$AbsoluteLink" class="social-icon si-borderless si-gplus" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
<i class="icon-gplus"></i>
<i class="icon-gplus"></i>
</a>
</div>
<span style="float: right">Share :</span>
and relative javascript
<script type="text/javascript" >
$(document).ready(function(){
$("#pinit").click(function(){
$("#pinmarklet").remove();
var e = document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('id','pinmarklet');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);
});
});