I tried to add an className in fontawesome and give a property(width,padding,fontsize, etc)in the sass but it didn't work what I expected. Is there any syntax give a className or id in the fa react? It works when I give a div+className and using flexbox but you know this is pretty not a good way if we can use className or id. I will leave my code below!
! or didn't work...
This is my whole main.js file! I will leave my part of my code(my question part)
import React, { Component } from "react";
import "./Main.scss";
import "./Common.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faHeart,
faComment,
faPaperPlane,
faBookmark,
faEllipsisH,
} from "@fortawesome/free-solid-svg-icons";
// import { FaRegComment } from "@fortawesome/free-solid-svg-icons";
// how to impport this faRegComment?
class Main extends Component {
render() {
return (
<>
<div class="main-wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input
class="search-box"
type="text"
placeholder=" Search"
/>
{/* ,style="font-family:Arial, FontAwesome */}
<div class="icons">
<img
id="compass"
src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png"
/>
<img
id="heart"
src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png"
/>
<img
id="my-page"
src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png"
/>
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi-identi" src="/images/about.png" />
<span class="name"> Jiwan Jeon </span>
{/* <i id="test" class="fa fa-ellipsis-h" aria-hidden="true"></i> */}
<div class="faEllipsisH">
<FontAwesomeIcon icon={faEllipsisH}></FontAwesomeIcon>
</div>
</div>
<div class="pic">
<img id="feed-pic" src="/images/ucscPic.png" />
</div>
<div class="show-box">
<div class="reaction-icons">
<FontAwesomeIcon icon={faHeart}></FontAwesomeIcon>
<FontAwesomeIcon icon={faComment}></FontAwesomeIcon>
<FontAwesomeIcon icon={faPaperPlane}></FontAwesomeIcon>
<FontAwesomeIcon icon={faBookmark}></FontAwesomeIcon>
</div>
<div class="like-counts">
<span>like 4,000</span>
</div>
<div class="check-comments">
<span>
UC Santa Cruz will continue to offer most courses remotely
or online for spring and summer 2021, providing in-person
instruction for a small
</span>
<a id="space" href="">
expanding
</a>
<br />
<a href="">Check the all comments</a>
<ul class="feed-comments">
<li>test</li>
</ul>
</div>
</div>
<div class="comment">
<i class="fa fa-smile-o"></i>
<input
class="user-input"
type="text"
placeholder="Add Comment..."
/>
<button class="post">Post</button>
</div>
</div>
</div>
</div>
<div class="main-right">
<div class="top">
<img class="selfi" src="/images/about.png" />
<div class="main-right-name">
<span id="eng-name">JiwanJeon94</span>
<br />
<span id="kr-name">전지완</span>
</div>
<a href="">Transform</a>
</div>
<div class="middle">
<div class="middle-words">
<span id="recommendation">Suggestions For You</span>
<a href="" id="view-all">
view all
</a>
</div>
<div class="recommendation-people">
<div id="recommendation-section1">
<img
id="recommendation-people-selfi"
src="/images/about.png"
/>
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img
id="recommendation-people-selfi"
src="/images/about.png"
/>
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img
id="recommendation-people-selfi"
src="/images/about.png"
/>
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img
id="recommendation-people-selfi"
src="/images/about.png"
/>
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
<div id="recommendation-section1">
<img
id="recommendation-people-selfi"
src="/images/about.png"
/>
<span>Recommendation for you</span>
<a href="">Follow</a>
</div>
</div>
</div>
<div class="footer">
<div class="footer-top">
<a href="">About</a>
<a href="">Help</a>
<a href="">press</a>
<a href="">API</a>
<a href="">Jobs</a>
<a href="">Privacy</a>
<a href="">Terms</a>
<a href="">Locations</a>
<a href="">TopAccounts</a>
<a href="">Hashtags</a>
<a href="">Language</a>
<br />
<br />
</div>
<span>2021 INSTAGRAM FROM FACEBOOK</span>
</div>
</div>
</div>
</>
);
}
}
export default Main;
This is my fa icons part
<div class="show-box">
<div class="reaction-icons">
<FontAwesomeIcon icon={faHeart}></FontAwesomeIcon>
<FontAwesomeIcon icon={faComment}></FontAwesomeIcon>
<FontAwesomeIcon icon={faPaperPlane}></FontAwesomeIcon>
<FontAwesomeIcon icon={faBookmark}></FontAwesomeIcon>
</div>
I Will leave sass file just in case
@font-face {
font-family: instagramFont;
src: url("./westagram.ttf") format("opentype");
}
@mixin icon-size() {
width: 30px;
height: 30px;
}
#root {
height: 100vh;
.main-wrapper {
margin: 10px 10px 10px 10px;
height: 100%;
.nav {
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
padding-top: 20px;
padding-bottom: 10px;
border-bottom: solid 1px #dbdbdb;
z-index: 9999;
.logo {
font-family: instagramFont;
padding-right: 100px;
font-size: 2rem;
}
.search-box {
margin-top: 5px;
width: 250px;
// main css파일이랑 똑같이 세팅 했는데 개발자툴이랑 왜 다른지 -해결-
height: 28px;
}
.icons {
margin-left: 100px;
#compass {
@include icon-size();
//30*30 으로 세팅했는데 개발자툴에서는 왜 53*53인지
}
#heart {
@include icon-size();
}
#my-page {
@include icon-size();
}
}
}
.main {
position: relative;
top: 70px;
left: 8px;
width: 100%;
height: 100%;
.feeds {
position: relative;
top: 40px;
right: 5px;
left: 61px;
width: 60%;
.article {
position: absolute;
display: flex;
flex-direction: column;
width: 614px;
height: 954px;
padding-bottom: 10px;
.identi {
position: relative;
display: flex;
flex-direction: row;
align-items: flex-start;
height: 50px;
.selfi-identi {
width: 30px;
height: 30px;
// padding: 15px 20px 20px 20px;
border-radius: 50%;
}
.name {
margin-top: 10px;
margin-left: 5px;
}
#test {
padding-top: 23px;
padding-left: 410px;
}
.faEllipsisH {
padding-top: 10px;
padding-left: 40px;
// padding-bottom: 20px;
}
}
.pic {
#feed-pic {
position: relative;
padding: 3px 3px 3px 3px;
width: 614px;
height: 614px;
padding: 5px 0px 2px 0px;
}
}
.show-box {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 170px;
padding: 5px 0px 20px 0px;
.reation-icons {
#heartShowBox {
padding-left: 10px;
font-size: 30px;
width: 30px;
}
.fa-comment-o {
padding-left: 10px;
padding-right: 5px;
}
.fa-send-o {
padding-left: 10px;
font-size: 30px;
}
.fa-bookmark-o {
padding-left: 450px;
font-size: 30px;
}
}
.like-counts {
margin-top: 10px;
padding-top: 20px;
}
.check-comments {
.space {
padding-top: 400px;
}
}
}
.comment {
position: relative;
// margin-top: 75px;x
.fa-smile-o {
font-size: 30px;
}
.user-input {
width: 530px;
height: 20px;
}
.post {
height: 25px;
border: solid 1px #d3d3d3;
border-radius: 5px;
background-color: #b2dffc;
font-size: 15px;
cursor: pointer;
}
}
}
}
}
.main-right {
position: fixed;
width: 28%;
height: 98%;
top: 11.9%;
right: 4%;
.top {
position: relative;
display: flex;
flex-direction: row;
padding-bottom: 3px;
.selfi {
width: 50px;
height: 50px;
padding: 15px 20px 20px 20px;
border-radius: 50%;
}
.main-right-name {
position: relative;
padding-top: 25px;
#kr-name {
opacity: 0.3;
}
}
a {
margin-left: 40px;
margin-top: 20px;
}
}
.middle {
height: 30%;
padding-bottom: 100px;
.middle-words {
padding-bottom: 25px;
#recommendation {
margin-left: 23px;
}
#view-all {
margin-left: 70px;
}
}
.recommendation-people {
display: flex;
flex-direction: column;
#recommendation-section1 {
#recommendation-people-selfi {
width: 30px;
height: 30px;
margin-top: 13px;
padding: 5px 5px 5px 5px;
border-radius: 50%;
}
span {
position: relative;
right: 5px;
top: -18px;
}
a {
position: absolute;
right: 3px;
font-size: 14px;
}
}
}
}
.footer {
margin-left: 10px;
.footer-top {
.a {
margin: 0px 0px 0px 5px;
opacity: 0.3;
}
}
}
span {
margin-left: 5px;
opacity: 0.3;
}
}
}
}