html - Inserting a link -


how can turn facebook font awesome icon link? whenever insert link pushes icon out of frame of picture. put other social media icons beside facebook icon aswell @ moment trying solve problem of getting icon link facebook.

css

.polaroid-images {  background: white;  display: inline;  float: left;  margin: 0 15px 70px;  padding: 10px 10px 25px;  text-align: center;  text-decoration: none;  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);  -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);  box-shadow: 0 4px 6px rgba(0, 0, 0, .3);  -webkit-transition: .15s linear;  -moz-transition: .15s linear;  transition: .15s linear;  z-index: 0;  position: relative; }  .polaroid-images a,  :after {  color: #333;  font-size: 20px;  content: attr(title);  position: relative;  top: 15px; }  .polaroid-images img {   display: block;   width: inherit; }  .polaroid-images a,  i:nth-child(3n) {  -webkit-transform: rotate(-24deg);  -moz-transform: rotate(-24deg);  transform: rotate(-24deg); }  .polaroid-images a:hover {  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transform: scale(1.2);  -moz-transform: scale(1.2);  transform: scale(1.2);  z-index: 10;  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);  box-shadow: 0 10px 20px rgba(0, 0, 0, .7); }  .polaroid-images {  position: relative;  font-size: 1em;  top: 15px;  margin-right: .5em;  color: #3b5998; }

html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet"/>  <div class="polaroid-images">   <a href="" title="alex"><img height="200"     src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="island"    title="alex" class=fishes /><i class="fa fa-facebook fa-3x"></i></a> </div>

so, of right have link wrapping entire card. should remove unless want whole card link facebook. here's do:

.polaroid-images div {   background: white;   display: inline;   float: left;   margin: 0 15px 70px;   padding: 10px 10px 25px;   text-align: center;   text-decoration: none;   -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);   -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);   box-shadow: 0 4px 6px rgba(0, 0, 0, .3);   -webkit-transition: .15s linear;   -moz-transition: .15s linear;   transition: .15s linear;   z-index: 0;   position: relative;  }    .polaroid-images div,   :after {   color: #333;   font-size: 20px;   content: attr(title);   position: relative;   top: 15px;  }    .polaroid-images img {    display: block;    width: inherit;  }    .polaroid-images div,   i:nth-child(3n) {   -webkit-transform: rotate(-24deg);   -moz-transform: rotate(-24deg);   transform: rotate(-24deg);  }    .polaroid-images div:hover {   -webkit-transform: rotate(0deg);   -moz-transform: rotate(0deg);   transform: rotate(0deg);   -webkit-transform: scale(1.2);   -moz-transform: scale(1.2);   transform: scale(1.2);   z-index: 10;   -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);   -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);   box-shadow: 0 10px 20px rgba(0, 0, 0, .7);  }    .polaroid-images {   position: relative;   font-size: 1em;   top: 15px;   margin-right: .5em;   color: #3b5998;  }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-  awesome.min.css" rel="stylesheet"/>    <div class="polaroid-images">    <div title="alex">      <img height="200"      src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="island"     title="alex" class=fishes />            <a href="https://www.facebook.com/"><i class="fa fa-facebook fa-3x"></i></a>    </div>  </div>

essentially, removed a tag entire block , wrapped around 4 fb icon. changed container div , changed style accordingly.

hope helps!


Comments

Post a Comment

Popular posts from this blog

Command prompt result in label. Python 2.7 -

i want put result(output) of shell command label. command works, label shows "0", however, in command prompt, result shown correctly, need showed in label. doing ubuntu. myg1 = button(root, text="rodyti informacija", command=lambda: gauti()) myg1.pack(side=bottom) def gauti(): imti = tekstas.get("1.0", "end-1c") info = subprocess.call("id '{imti}' ".format(imti=imti), shell=true) w = label(root, text= info) w.pack(side = bottom) subprocess.call() returns exit code of process created (in case 0 success). if want text output of process, should instead call subprocess.check_output() .
Read more

javascript - How do I use URL parameters to change link href on page? -

i change href value of link using url parameters. example: default <a id="dlink" href="link-1">link</a> but, when user goes https://url.com/?dlink=link-2 it swaps out link new link <a id="dlink" href="link-2">link</a> first need value url. if you're not using javascript framework can create function using jquery. please check get url parameter jquery or how query string values in js it. after that, element "a" id , set value there. $("#dlink").attr("href", hreffromparam);
Read more

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -

so have domain nameservers pointed aws route 53. site hosted on ec2 instance , reachable resolves site.com, if input www.site.com. i'm curious how site resolve www.site.com. have under route53 domains hosted zone 2 additional record sets outside of ns , soa: a site.com ec2 elastic ip cname www.site.com ec2 public dns i can reach site using both site.com , www.site.com, resolve site.com. there way make if enter either, resolves www.site.com? at first, both should record set. a site.com ec2 elastic ip www.site.com ec2 elastic ip and need redirect setting in web server (nginx, apache, ..) following. (source: how redirect www non-www nginx on centos 7 ) redirect non-www www if want redirect users plain, non-www domain www domain, add server block: server { server_name example.com; return 301 $scheme://www.example.com$request_uri; } save , exit. configures nginx redirect requests "example.com" "www.example.com". not
Read more