Tell us what’s happening:
Your code so far
HTML
<div id="contact-links">
<a href="https://github.com/CamaguNcoso" id="profile-link" target="_blank" class="btn contact-details">
<i class="fab fa-github"></i>GitHub</a>
<a href="https://www.linkedin.com/in/camagu-ncoso-401bb2182/" id="profile-link" target="_blank" class="btn contact-details">
<i class="fa fa-linkedin-square">
</i>LinkedIn</a>
<a href="mailto:Camaguncoso@gmail.com">
<i class="far fa-envelope email-icon"></i> Email me
</a>
</div>
</section>
</body>
</html>
CSS
#contact {background-color: #015249;
width: 100%;
height: 80vh;
padding: 1rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
#contact-p {color: white;
font-style: italic;
font-weight: 100;
text-align: center;
font-size: 1.7rem;}
@media (max-widths: 800px){
{font-size: 2.5rem;}
}
.contact-details {font-size: 2.4rem;
text-shadow: 2px 2px 1px #1f1f1f;
transition: transform 0.3s ease-out;}
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge:
diomed
August 22, 2023, 11:06am
2
it’s very simple. icons are coming from font which is called Font Awesome.
if you want icons to display, you must include that font into webpage.
I don’t know what you are talking about. I want to be helped by a professional to give me a better explanation
You didnt share the entire code so I am not sure, but do you have the link to the font awesome stylesheet? It would look something like this depending on what version you are using
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Here is the entire code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="Personal-Portfolio.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Personal Portfolio</title>
</head>
<body>
<nav id="navbar">
<ul id="nav-list">
<li>
<a class="nav-link" href="#welcome-section">About
</a>
</li>
<li><a class="nav-link" href="#projects">Work
</a>
</li>
<li><a class="nav-link" href="#contact">
Contact
</a>
</li>
</ul>
</nav>
<section id="welcome-section" class="welcome-section">
<h1>Welcome, I am Camagu</h1>
<p>a Front-End Developer</p>
</section>
<section id="projects" class="projects">
<h2 class="project-tile">These are some of my projects</h2>
<div class="projects-grid">
<a href=" " target="_blank">
<img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img">
<p class="project-tile">Tribute page</p>
</a>
<a href="https://fedelopez17.github.io/tic-tac-toe/" target="_blank">
<img src="https://image.winudf.com/v2/image1/Y29tLmZjZy50aWsudGFrLnRvZV9zY3JlZW5fNV8xNjU3MzQwODExXzAwOQ/screen-5.webp?fakeurl=1&type=.webp" alt="tic-tac-toe" class="project-img">
<p class="project-tile">Tic-Tac-Toe</p>
</a>
<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
<img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p></a>
<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
<img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p>
</a>
<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
<img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p>
</a>
<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
<img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p>
</a>
<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
<img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p>
</a>
</div>
</section>
<section id="contact" class="contact">
<div id="contact-header">
<h2>Lets work together...</h2>
<p id="contact-p">how do you take your coffee?</p>
</div>
<div id="contact-links">
<a href="https://github.com/CamaguNcoso" id="profile-link" target="_blank" class="btn contact-details">
<i class="fab fa-github"></i>GitHub</a>
<a href="https://www.linkedin.com/in/camagu-ncoso-401bb2182/" id="profile-link" target="_blank" class="btn contact-details">
<i class="fa fa-linkedin-square">
</i>LinkedIn</a>
<a href="mailto:Camaguncoso@gmail.com">
<i class="far fa-envelope email-icon"></i> Email me
</a>
</div>
</section>
</body>
</html>
CSS
body {margin: 0; padding: 0;}
#navbar {background-color: #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: flex-end;
font-family: Blippo, fantasy;}
#nav-list {display: flex;
flex-direction: row;}
li {list-style: none;}
a {color: white;
text-decoration: none;
font-size: 1.5em;
padding: 1rem 2rem;}
nav > ul > li > a:hover {
background-color: #C06014;
}
#welcome-section {width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #C06014;}
h1 {color: white;
font-size: 3.5rem;
}
#welcome-section > p {color: #1A2930;
font-size: 2.5rem;
font-style: italic;
font-weight: 700;}
.projects {text-align: center;
background-color: #828081;
padding: 7rem 2rem;}
h2 {font-size: 3.2rem;
color: white;}
.project-img {height: calc(100-4.8rem);
width: 100%;
object-fit: cover;}
.project-tile {color: white;
width: 100%;
background-color: #008284;
padding: 1em;}
.projects-grid {display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1080px;
margin: 0 auto;
margin-bottom: 6rem;}
#contact {background-color: #015249;
width: 100%;
height: 80vh;
padding: 1rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
#contact-p {color: white;
font-style: italic;
font-weight: 100;
text-align: center;
font-size: 1.7rem;}
@media (max-widths: 800px){
{font-size: 2.5rem;}
}
.contact-details {font-size: 2.4rem;
text-shadow: 2px 2px 1px #1f1f1f;
transition: transform 0.3s ease-out;}
diomed
August 23, 2023, 11:01am
6
you can see that where you have class fa your icon is ok. so you have fa in LinkedIn and there your icon is showing.
just remove additional letters and leave just fa
so fab and far → fa
.fa {margin-right:1rem}
will give you some nice spacing between icon and text if you apply it to your css.
system
February 21, 2024, 11:01pm
7
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.