Creating linkedin logo and transfer user to website when it is clicked

Username (e.g. epiz_XXX) or Website URL

http://jobresume.epizy.com/contact.php

Error Message

Trying to create 2 circles with LinkedIn logo and github images that when clicked transfer user to linkedIn and github websites. However logo’s don’t work and when clicked objects don’t send user to another webpage.

I would really appreciate your help.

Other Information

Here is HTML code:

<hr>
        <ul class="social-media-list">
          <li><a href="https://github.com/Adimvut/selfdrivingAI" target="_blank" class="contact-icon">
            <i class="fa fa-github" aria-hidden="false"></i></a>
          </li>
        similar linkedIn
        </ul>

CSS code:

/* Social Media Icons */
.social-media-list {
  position: relative;
  font-size: 22px;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.social-media-list li a {
  color: #fff;
}

.social-media-list li {
  position: relative; 
  display: inline-block;
  height: 60px;
  width: 60px;
  margin: 10px 3px;
  line-height: 60px;
  border-radius: 50%;
  color: #fff;
  background-color: rgb(27,27,27);
  cursor: pointer; 
  transition: all .2s ease-in-out;
}

.social-media-list li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 1px #fff;
  transition: all .2s ease-in-out;
}

.social-media-list li:hover {
  background-color: #fff; 
}

.social-media-list li:hover:after {
  opacity: 1;  
  transform: scale(1.12);
  transition-timing-function: cubic-bezier(0.37,0.74,0.15,1.65);
}

.social-media-list li:hover a {
  color: #000;
}

I took a look at your website, and found the issue.

This line: <i class="fa fa-github" aria-hidden="false"></i> is not rendering, probably because you are not calling any Font Awesome code. Since that element is ‘hidden’ to the browser, there is no link for the user to click on. If you replace that line with text, it works just fine.

So you have to get Font Awesome installed, or change the links content.

5 Likes
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>  

Add this code.
I added this code into inspect mode and see what I got.
image

2 Likes

to use icons
especially these with FA

you need to use fontawesome icon pack (css)

and then when you say in your code that something is FA class - (desired icon)

then the browser finds that icon in the specified coordinates when it reads the instructions in the fontawseome pack

so add the required CSS to your code

4 Likes

Thanks for such a fast responce, I really appreciate your help :slight_smile:

3 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.