HTML
<footer>
<a href="github.com/wallcrawlish" class="fa fa-github"></a>
made by <a href="https://github.com/wallcrawlish">Declan Meehan </a>
</footer>
CSS
footer a {
text-decoration: none;
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
I have tried
footer > a
just a
pretty much every combination and saw other people solving this problem with things that did not work which makes this more frustrating. ANy help would be greatly appreciated.
I have editted your code to make it readable. When listing code, remember to put three backticks (the key below ESC) on the line before and three on the line after.
1 Like
You mean the underline of the link?
Your solution of
footer a {
text-decoration: none;
}
Seems to do it. But I might suggest reconsidering. A basic principle of UX is that things should be intuitive. People are preprogramed to know that a link is blue and underlined. When you take those away, you make your site less intuitive. How will they know what things are links?
1 Like
Im using the font awesome social buttons so it looks very strange to have something like the FCC logo blue with a line under it. It is not working for me, I am using codepen is that why it’s causing me problems?
I’m not sure why codepen would cause a problem. That’s where I tested my solution.
In any case, I think that’s how you do it. If you’re not going to have underlining, I might suggest wrapping the whole thing (logo and text) in something that resembles a button.
I’ve seen too many pages where people removed all those little clues and I had to guess how it worked.
1 Like
Its totally fine to have a social media icon as a link, most people will know to click on those because its standard to use them in that way. Its pretty rare nowadays for text links to be blue and underlined…many times nowadays text only gets underlined in hover state but regardless they just need to stand out in some way from other text around it…
When you say it still has an underline, do you mean as is, or only when you interact with it like hover / click on it? Make sure to also make a hover, a:hover and a active, a:active states with text:decoration: none as well. It is hard to tell just looking at the snippet you included, why what you have would not make the standard underline disappear though… do you have your project online? Can you share the link?
1 Like
ok thanks thats a good idea to change it to a link
Heres the project but I’m just gonna go ahead and change this, I also got around this weird problem by setting the text color to black. Thanks for the help everyone!
Yeah, I guess that’s true. I wasn’t reading closely enough. I’ve just seen coders try to remove all decorations, and focus outlines and whatever - because they think they detract from the visual aesthetic of the site, not realizing that they’re making it more difficult for humans to use.
But you’re right, a group of social media, email, phone, etc. icons - that’s so common that it’s not going to confuse anyone, and would probably look cleaner. Some hover effect should be good enough.
I totally get where you’re coming from though. Mystery meat navigation is my biggest pet peeve…I dont care how cool a site looks, if I have to guess where I’m supposed to click, I choose to click the close tab button and move on 
Looks good, just need to work on your mobile view and get it responsive. Btw, I made it halfway through your portfolio text before I realized it was just repeating itself over and again. I blame it on not feeling good and needing sleep lol
1 Like