Using Font Awesome alongside Bootstrap Social Icons, displaying each icon's color in individual squares rather than the complete icons

This snippet displays the CSS:

<head>
 <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">

    <link rel="stylesheet" href="css/styles.css">
    <title>Ristorante Con Fusion</title>
</head>

Check out the code below:

                        <a class="btn btn-social-icon btn-google" href="http://google.com/+"><i calss="fa fa-google-plus fa-lg "></i></a>
                        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i calss="fa fa-facebook fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i calss="fa fa-linkedin fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i calss="fa fa-twitter fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i calss="fa fa-youtube fa-lg"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"<i calss="fa fa-envelope fa-lg"></i></a>
                    </div>

Take a look at the design here: View the footer at the bottom right of the page

cssbootstrap-4font-awesome

Answer №1

You have a typo in the spelling of class; it's written as calss in all instances of your <i class> code. Please make sure to correct it:

   
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   
   
   <i class="fa fa-google-plus fa-lg "></i>
   <i class="fa fa-facebook fa-lg"></i>
   <i class="fa fa-linkedin fa-lg"></i>
   <i class="fa fa-twitter fa-lg"></i>
   <i class="fa fa-youtube fa-lg"></i>
   <i class="fa fa-envelope fa-lg"></i>

Answer №2

Common mistakes often occur when utilizing font awesome icons.

It is essential to provide more information about the issue you are facing, such as the content of your style sheet, as you may unintentionally override the font-family property.

Additionally, how is your project structured? Keep in mind that along with font-awesome.min.css, you will also need a folder with the file 'Fonts/fontawesome-webfont.ttf' for proper functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we create responsive websites?

Since starting my Software Developer studies about 3 months ago, I've been working on a website project for a driving school with a team of four. The issue we're facing is that when we transfer and open files between laptops, the website layout a ...

javascripthtmlcss

Enhancing Image Quality upon Hovering

Is there a way to prevent the content of the article from moving when an image becomes absolutely positioned? The issue I am facing is that the image overlaps its container with overflow: hidden only when the img is absolute positioned. article { back ...

htmlcssdom

Adjusting jQuery tab content heights to maintain consistent height across tabs and prevent varying heights

I am currently working on a tabbed view that is very similar to the demo found at the following link: http://jsfiddle.net/syahrasi/us8uc/ $(document).ready(function() { $(".tabs-menu a").click(function(event) { event.preventDefault(); $(this).pare ...

jqueryhtmlcsstabs

Placing numbers at the top of the HTML table cell for better visibility

I am currently utilizing a two-column HTML table to showcase a list of rules. In one column, I have the rule's number, while in the other, I have the rule itself. However, I've noticed that the rule numbers are appearing near the bottom of their ...

css

Steps for accessing an image from the static folder in a Python-Django application

I am currently working on a portfolio website project where I am using html, css, js, and django. However, I am facing an issue with loading an image from the assets folder within the static directory. Here is a snippet of the template code causing the pr ...

cssdjangodjango-templatesdjango-staticfiles

Nested divs with inline formatting

On my HTML page, I have the following structure: <div id="frst"> FIRST </div> <div id="top"> <div id="mid"> <div id="bottom"> <ul class="menu"> <li>A</li> ...

csshtmlinline

Setting font sizes using CSS values according to the Shadow DOM root element

Summary of the problem: I am searching for a method to establish font size values based on an element inside a shadow dom relative to the shadow host, regardless of the parent element's font size within the shadow dom. I am looking for a solution sim ...

htmlcssdomweb-component

Switch up the current Slick Carousel display by utilizing a div element

We have implemented the slick carousel to show only one slide at a time within the <div class='item__wrapper'>. Beneath this are three items, and we want the slick carousel to update when any of these items are clicked. Issues Using item ...

javascriptjqueryhtmlcssslick.js

Adjusting the height of a flexbox column to fit three rows within the space of two

Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). ...

javascriptcssreactjstwitter-bootstrapflexbox

Tips for scrolling a div that has too much content within a webpage

Is there a method to manipulate the scrollbar within a div on a webpage? Specifically, I am attempting to automate scrolling up and down on an Instagram post like . However, since the scrollbar may be hidden using CSS properties, detecting it can be challe ...

javacssseleniumscrollbaroverflow

The height of a table cell in MVC cannot be altered

Could someone please help me with changing the height of table cells in MVC using Dreamweaver? I have already created the table with the following structure, but I am struggling to adjust the cell height. Any advice or tutorials would be greatly appreciate ...

htmlcsshtml-table

What is the best way to add a centered progress spinner on top of an overlay?

Here is a code snippet that includes functionality to append a site overlay as needed. I am currently trying to implement the feature of also displaying an image progress spinner in the center of the screen over the overlay. I would prefer if this spinner ...

jquerycssoverlay

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

javascriptjqueryhtmlcss

SVGs do not display on iPhones

Having some issues with my code - specifically, I have an SVG animation that seems to work on all devices except iPhones. I've been struggling to find a solution. Here is the code snippet for the SVG: <div class="contenuto-svg"> <svg vi ...

javascripthtmlcsssvg

Creating an image slider that pauses on mouse hover

Here is a code snippet that I'd like to share <body> <div id="slideshow"> <div> <img src="assets/images/home-banner.jpg" width="995" height="421" alt=""/> </div> <div&g ...

jqueryhtmlcss

The image does not adjust size properly on mobile devices

How can I enable pinch-zoom and the ability to move around to view an enlarged image on mobile devices? https://i.sstatic.net/6JGRh.png Despite trying to add user-scalable=yes to the viewport meta tag, the image remains fixed within the viewport. Any sug ...

htmlcssresponsive-design

Leveraging the power of dual CSS classes for a single element

Can you help me troubleshoot this? I have a .social div, and I want zero padding on the top for the first one, and no bottom border for the second one. I tried creating classes for the first and last scenarios, but it seems like something is off: .socia ...

cssclass

What is the best way to adjust the width of a table td element using CSS in Spiceworks?

I'm attempting to modify a CSS code snippet for Spiceworks. Here is the specific line that I need to adjust: <td class="body-id cell-id" style="width: 12%; "></td> The following code: SPICEWORKS.utils.addStyle('body{background-col ...

cssspiceworks

The padding on the button inside the v-card is not being applied as expected

I am facing an issue with the following code snippet: <v-card height="200"> <v-card-actions class="mb-0"> <v-btn flat color="orange">Share</v-btn> <v-btn flat color="orange">Explore</v-btn> & ...

javascriptcssvue.jsvuetify.js

Placing an element in a fixed position behind a non-fixed element

I am facing a challenge with an element that has two children, one of them is absolutely positioned. My goal is to position this absolutely placed element behind its sibling. Unfortunately, the z-index property doesn't seem to be working as expected. ...

htmlcssz-indexabsolute