react-icons/fa APIs
- FaTwitter
- FaGithub
- FaInstagram
- FaLinkedin
- FaTimes
- FaPlus
- FaFacebookF
- FaSearch
- FaYoutube
- FaFacebook
- FaTrash
- FaHeart
- FaLinkedinIn
- FaBars
- FaEnvelope
- FaStar
- FaPlay
- FaHome
- FaEdit
- FaSun
- FaMoon
- FaUser
- FaGithubAlt
- FaFacebookSquare
- FaArrowRight
- FaCheck
- FaTwitterSquare
- FaAngleRight
- FaInfoCircle
- FaMapMarkerAlt
- FaArrowLeft
- FaPen
- FaTrashAlt
- FaShoppingCart
- FaGithubSquare
- FaCheckCircle
- FaDownload
- FaCaretDown
- FaChevronRight
- FaCog
- FaCode
- FaDev
- FaDribbble
- FaLocationArrow
- FaExternalLinkAlt
- FaAngleDown
- FaArrowUp
- FaSignOutAlt
- FaTags
- FaQuoteLeft
- FaPause
- FaChevronLeft
- FaChevronDown
- FaReact
- FaFolderOpen
- FaCircle
- FaAngleLeft
- FaCompass
- FaAlignRight
- FaMinus
- FaBoxOpen
- FaLink
- FaUsers
- FaGoogle
- FaTwitch
- FaRss
- FaSpotify
- FaCrown
- FaLock
- FaCopyright
- FaRegTrashAlt
- FaUserAlt
- FaRegStar
- FaPhone
- FaMapMarkedAlt
- FaRegCircle
- FaVolumeUp
- FaDiscord
- FaUserCircle
- FaList
- FaStackOverflow
- FaFreeCodeCamp
- FaMicrophone
- FaRedo
- FaClipboard
- FaChevronUp
- FaLongArrowAltRight
- FaAngleDoubleRight
- FaKey
- FaCubes
- FaBan
- FaMediumM
- FaPinterest
- FaVideo
- FaDribbbleSquare
- FaComment
- FaBellSlash
- FaRegBuilding
- FaSlack
- FaItunesNote
- FaBox
- FaWonSign
- FaAirbnb
- FaDoorOpen
- FaGlobe
- FaBath
- FaParking
- FaWhatsapp
- FaUserInjured
- FaRegPlusSquare
- FaPlayCircle
- FaPauseCircle
- FaVolumeMute
- FaSpinner
- FaRegLightbulb
- FaCcVisa
- FaCcMastercard
- FaCcPaypal
- FaCcAmazonPay
- FaRegHeart
- FaCartArrowDown
- FaCartPlus
- FaPinterestSquare
- FaPaypal
- FaAmazon
- FaShopify
- FaApple
- FaTruck
- FaUndoAlt
- FaRocketchat
- FaWallet
- FaPinterestP
- FaGooglePlay
- FaCaretUp
- FaFilter
- FaCalendarAlt
- FaCodeBranch
- FaExclamationCircle
- FaEye
- FaOsi
- FaRegEdit
- FaMicrophoneAlt
- FaMicrophoneAltSlash
- FaCogs
- FaEllipsisH
- FaEquals
- FaQrcode
- FaAddressBook
- FaServer
- FaFolder
- FaLongArrowAltLeft
- FaSkype
- FaHandHoldingHeart
- FaRegPaperPlane
- FaRegBookmark
- FaInbox
- FaHamburger
- FaSearchLocation
- FaBirthdayCake
- FaUserGraduate
- FaGoogleDrive
- FaPaperPlane
- FaLockOpen
- FaUserFriends
- FaExchangeAlt
- FaEllipsisV
- FaSortAmountDown
- FaSortAmountUp
- FaCaretSquareRight
- FaCaretSquareLeft
- FaColumns
- FaUndo
- FaQuestionCircle
- FaBloggerB
- FaRedditAlien
- FaCodepen
- FaGitlab
- FaBlogger
- FaCameraRetro
- FaTabletAlt
- FaRegNewspaper
- FaRegCalendarAlt
- FaForward
- FaQuoteRight
- FaVoteYea
- FaShareSquare
- FaBehanceSquare
- FaSignInAlt
- FaSkull
- FaReddit
- FaRegSmileBeam
- FaWindowClose
- FaWindowMinimize
- FaWindowMaximize
- FaPaste
- FaStopwatch
- FaStop
- FaSave
- FaFileExport
- FaHandPointer
- FaFile
- FaMapSigns
- FaClipboardCheck
- FaClock
- FaThList
- FaDumbbell
- FaGuitar
- FaNetworkWired
- FaPuzzlePiece
- FaUserEdit
- FaEyeSlash
- FaPhoneAlt
- FaStickyNote
- FaThumbsUp
- FaThumbsDown
- FaArrowCircleUp
- FaLightbulb
- FaBookOpen
- FaRegSquare
- FaItalic
- FaBold
- FaPencilAlt
- FaSlash
- FaShapes
- FaShip
- FaTree
- FaFilePdf
- FaRegArrowAltCircleRight
- FaFileUpload
- FaKeyboard
- FaBehance
- FaGoodreadsG
- FaProductHunt
- FaXing
- FaBolt
OtherRelated APIs
react-icons/fa#FaGoogle JavaScript Examples
The following examples show how to use
react-icons/fa#FaGoogle.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js From AdaptivApps-fe with MIT License | 5 votes |
![]() ![]() |
LandingPage = () => {
const classes = useStyles();
const { loginWithRedirect } = useAuth0();
return (
<IconContext.Provider value={{ color: "white", size: "3rem" }}>
<NavBar />
<Container className={classes.container}>
<div className={classes.box}>
<Typography className={classes.typography}>
Your home for Angel City Sports events and more!
</Typography>
<img
className={classes.bannerImg}
src={landingImage}
alt="Angel City Sports"
/>
</div>
</Container>
<Container className={classes.contentContainer}>
<Box className={classes.contentIntro}>
<Typography variant="subtitle2">Sign Up Now!</Typography>
<Typography className={classes.contentP}>
Sign Up Now with Facebook or Google, add your profile info, and keep
track of Angel City Sports Games, Clinics, and other events! All the
info you need is all in one place - The Angel City Sports App.
</Typography>
</Box>
<Box className={classes.btnContainer}>
<Button
className={classes.btn1}
onClick={() => loginWithRedirect({})}
>
<FaFacebookSquare className={classes.icon} />
<p>Sign up with Facebook</p>
</Button>
<Button
className={classes.btn2}
onClick={() => loginWithRedirect({})}
>
<FaGoogle className={classes.icon} />
<p>Sign up with Google</p>
</Button>
<Link
to="privacy-policy"
style={{ padding: "0" }}
className={classes.privacyLink}
>
<p>Privacy Policy</p>
</Link>
</Box>
<Link to="accessibility" className={classes.a11yLink}>
Accessibility Statement
</Link>
</Container>
</IconContext.Provider>
);
}
Example #2
Source File: GoogleAuth.js From devagram with GNU General Public License v3.0 | 5 votes |
![]() ![]() |
GoogleAuth = (props) => {
const successResponse = (response) => {
/**
* This will return google data of user like emailId, name, fullname, profileUrl, GoogleId idToken etc.
* Make backend api call according and add authType as google
*/
console.log(response);
};
const failureResponse = (response) => {
/**
* Return error if something went wrong
* Handle error accordingly
*/
console.log(response);
};
return (
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID}
buttonText="SignIn wih google"
onSuccess={successResponse}
onFailure={failureResponse}
cookiePolicy={"single_host_origin"}
theme={"dark"}
render={(props) => (
<Button
type="button"
btnType="Google"
disabled={props.disabled}
onClick={props.onClick}
>
<FaGoogle style={{ marginRight: "0.2rem" }} />
Login with Google
</Button>
)}
/>
);
}