CODEWITHSUNDEEP
htmlcssfont-awesome
Riggsee
Riggsee

Reputation: 3

Fontawesome HTML and CSS social icons

Im designing a site for a friends off of a template he obtained and one of the big things he wants to do is replace the social icons in the navbar with other icons. Primarily he wants to add one for Twitch and Youtube. Currently the nav bar in HTML looks like this: 

<ul class="socials-nav">
        <li class="socials-nav-item"><a href="#"><span class="fa fa-twitter"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-facebook"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-github"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-vimeo-square"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-google-plus"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-instagram"></span></a></li>
    </ul>

The CSS for fa-facebook looks like this: 

.fa-facebook-official:before {
  content: "\f230";

Basically I just dont have a lot of experience with templates and almost none with font awesome. Im not a pro just looking to help a friend out. Thanks in advance.

Upvotes: 0

Views: 1767

Answers (1)

SOUPaLOOP
SOUPaLOOP

Reputation: 121

make sure that you have a link to a font-awesome cdn. Example: 

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

then add the the class to the font awesome icons like below - the last two are what you asked for. I find that searching fontAwesome - Here is a good practice as you can visually see what the icon looks like easily. 

<ul class="socials-nav">
        <li class="socials-nav-item"><a href="#"><span class="fa fa-twitter"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-facebook"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-github"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-vimeo-square"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-google-plus"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-instagram"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-twitch"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-youtube"></span></a></li>
    </ul>

I have also made a simple JSFiddle for you to review. Hope This helps.

ps. you will not need to add the fontawesome css into your internal website using the cdn as shown above. but you of course can do this if you wish. i do it on my websites but i know many that dont - please let me know if you have any other questions, ill do my best to help you out.

Upvotes: 1

Related Questions