React icons display

Question

My imported React icons on my personal website are not displaying at all. I tried reinstalling React Icons with and without --save. I checked node_modules and package.json. Everything seems to be in order, but it still doesn't work.

Here is my code from HeaderSocials.jsx:

import React from 'react'
import { BsLinkedin } from 'react-icons/bs'
import { BsGithub } from 'react-icons/bs'

const HeaderSocials = () => {
  return (
    <div className='header__socials'>
        <a href="https://linkedin.com" target="_blank" rel="noreferrer"> <BsLinkedin/> </a>
        <a href="https://github.com" target="_blank" rel="noreferrer"> <BsGithub/> </a>
        <a href="https://dribbble.com" target="_blank" rel="noreferrer">aa</a>
    </div>
  )
}

export default HeaderSocials

And Header.jsx:

import React from 'react'
import './header.css'
import CTA from './CTA'
import SKANDER from '../../assets/SKANDER.jpg'
import HeaderSocials from './HeaderSocials'

const Header = () => {
  return (
    <div>
      <header>
        <div className="container header__container">
          <h5>Hello I'm</h5>
          <h1>Skander JEDDA</h1>
          <h5 className="text-light">Fullstack JS Developer</h5>
          <CTA />
          <HeaderSocials />

          <div className="me">
            <img src={SKANDER} alt="me" />
          </div>

          <a href="#contact" className='scroll__down'>Scroll Down</a>
        </div>
      </header>
    </div>
  )
}

export default Header

I tried reinstalling the library and checking Stack Overflow, and I even asked ChatGPT, but still to no avail.

I cannot reproduce this ~ https://codesandbox.io/s/compassionate-framework-ss496r?file=/src/App.js. Perhaps you've got some CSS that is hiding or obscuring the icons. Use your browser's dev-tools to inspect the rendered output — Phil, Jan 12 '23 at 06:44
My div with className "header__socials" is visible in the browser dev tools but doesn't appear on screen, everything else works fine i'm kinda lost here — Skander JEDDA, Jan 12 '23 at 08:17
Comment out or remove any css being applied to the page and see if the problem still occurs. If the problem persists, try commenting out all other code and rendering only the component in question. If it renders then you can start adding code back one piece at a time until it breaks again. When it breaks, you'll have found the issue. If you comment out all other code and it still doesn't render, then you'll need to check the component itself and possibly do the same process. — I0_ol, Jan 12 '23 at 08:41
Re *"node_modules and package.json"*: That would imply [Node.js](https://en.wikipedia.org/wiki/Node.js). How are React and Node.js connected in this particular case? What is Node.js used for? Is it only used for installation of React Icons? — Peter Mortensen, Jan 16 '23 at 12:07
This is used as an example in [a meta question](https://meta.stackoverflow.com/questions/422686/code-blocks-surrounded-by-triple-backtick-then-single-backtick). — Peter Mortensen, Feb 01 '23 at 15:30

score 0 · Answer 1 · answered Jan 12 '23 at 08:58

0

Try removing the className 'header__socials' and then if you want to style your icons here is an example link

answered Jan 12 '23 at 08:58

BenDou

13
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 12 '23 at 15:50

React icons display

1 Answers1