react-icons/fi#FiMail JavaScript Examples
The following examples show how to use
react-icons/fi#FiMail.
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: Navbar.js From Official-Website with MIT License | 6 votes |
|
function Navbar(props) {
return (
<div className="navbar">
<div className="searchbar">
<IconContext.Provider value={{ color: '#252537'}}>
<IoIosSearch size={20} />
</IconContext.Provider>
<input placeholder="Search everything..."/>
</div>
<div className="profile-settings">
<FiCheck />
<FiUsers />
<FiBell />
<FiMail />
</div>
</div>
);
}
Example #2
| Source File: ProjectCard.js From Winter-of-Code-2.0-frontend with MIT License | 6 votes |
|
ProjectCard = (props) => {
const [showIdeas, setShow] = useState(false);
return (
<div className="Card" >
<div className="Project_name" style={{visibility: `${showIdeas ? 'hidden' : 'visible'}`, height: `${showIdeas ? '0' : '30'}%`}}>
{props.data.title}
</div>
<div className="Project_ideas" onClick={() => {
setShow(showIdeas ? false : true);
}}>
Check Ideas
<FaAngleDown style={{transition: "all ease-in-out 0.3s", marginLeft: "5px", transform: `rotateZ(${showIdeas ? '0' : '-90'}deg)`}}/>
</div>
<div className="Organizer_img" style={{height: `${showIdeas ? '0' : '50'}%`, backgroundImage: `url(${props.data.org_img})`}} >
</div>
<div className="Ideas" style={{visibility: `${showIdeas ? 'visible' : 'hidden'}`, height: `${showIdeas ? '290' : '0'}%`}}>
<div className="flex-container">
<a href={props.data.repo_link} className={props.data.tags.includes("remove")?"no_view":"git_hub"} target='_blank' rel='noreferrer'><FaGithub /></a>
</div>
<div>
{props.data.mentors.map((mentor, idx) => {
return (
<a className="mentors-flex" href= {"mailto:" + mentor.email} >
<FiMail style={{color: "white", cursor: "pointer", position: "relative", top: "2px"}} key={idx}></FiMail>
<div style={{color: "white", display: "inline", cursor: "pointer", paddingLeft: "5px"}}>{mentor.name}</div>
</a>
)
})}
</div>
{props.data.Ideas.map((idea, idx) => {
return (
<li style={{textAlign: "center", margin: "10px"}}>{idea}</li>
)
})}
</div>
</div>
)
}
Example #3
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
Footer = () => {
return (
<FotterWrapper>
<img className="section__particle one" alt="img" src={particleOne} alt="appion app landing" />
<Container>
<Row>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets first">
<Link className="footer-logo" to="#">
<img src={logo} alt="logo" />
</Link>
<ul className="info">
<li>
<FiMail />
<Link className="anchor" to="#">
[email protected]
</Link>
</li>
<li>
<FiPhoneCall />
<Link className="anchor" to="#">
+88 12345 697858
</Link>
</li>
</ul>
<ul className="social">
<li>
<Link className="anchor" to="#">
<FaFacebookF />
</Link>
</li>
<li>
<Link className="anchor" to="#">
<FaTwitter />
</Link>
</li>
<li>
<Link className="anchor" to="#">
<FaLinkedinIn />
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">Services</h3>
<ul className="widget-catagory">
<li>
<Link className="anchor" to="#">
Web Developments
</Link>
</li>
<li>
<Link className="anchor" to="#">
UX/UI Design
</Link>
</li>
<li>
<Link className="anchor" to="#">
Graphic Design
</Link>
</li>
<li>
<Link className="anchor" to="#">
Software Development
</Link>
</li>
<li>
<Link className="anchor" to="#">
Contact
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">About Us</h3>
<ul className="widget-catagory">
<li>
<Link className="anchor" to="#">
About Us
</Link>
</li>
<li>
<Link className="anchor" to="#">
Work Portfolio
</Link>
</li>
<li>
<Link className="anchor" to="#">
Team
</Link>
</li>
<li>
<Link className="anchor" to="#">
Plan & Pricing
</Link>
</li>
<li>
<Link className="anchor" to="#">
Company News
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">Our Address</h3>
<p>
1370 Roosevelt Street, <br />
Little York City, New Jersey <br />
08834
</p>
</div>
</Col>
</Row>
<div className="footer-bottom">
<ul className="footer-menu">
<li>
<Link className="anchor" to="#">
Terms
</Link>
</li>
<li>
<Link className="anchor" to="#">
Condition
</Link>
</li>
<li>
<Link className="anchor" to="#">
Contact
</Link>
</li>
<li>
<Link className="anchor" to="#">
Help
</Link>
</li>
</ul>
<p className="copyright-text">
Copyright @
<Link className="anchor" to="#">
Devscorn
</Link>
| All Right Reserved 2020
</p>
</div>
</Container>
</FotterWrapper>
);
}
Example #4
| Source File: Footer.js From benjamincarlson.io with MIT License | 4 votes |
|
Footer = () => {
const { colorMode } = useColorMode()
const borderIcon = {
light: 'gray.400',
dark: 'gray.500'
}
const footerHoverBg = {
light: 'gray.100',
dark: 'gray.700',
}
return (
<Box bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} mt={4}>
<Flex
align="center"
my={4}
direction="column"
>
<div>
<Link href="https://twitter.com/bjmncrlsn" title="Twitter" isExternal>
<IconButton
aria-label="Twitter"
icon={<FiTwitter />}
size="lg"
color={borderIcon[colorMode]}
variant="ghost"
_hover={{ backgroundColor: footerHoverBg[colorMode] }}
/>
</Link>
<Link href="https://github.com/bjcarlson42" title="GitHub" isExternal>
<IconButton
aria-label="GitHub"
icon={<FiGithub />}
size="lg"
color={borderIcon[colorMode]}
variant="ghost"
_hover={{ backgroundColor: footerHoverBg[colorMode] }}
/>
</Link>
<Link
href="https://www.linkedin.com/in/bjcarlson42"
title="LinkedIn"
isExternal
>
<IconButton
aria-label="LinkedIn"
icon={<FiLinkedin />}
size="lg"
color={borderIcon[colorMode]}
variant="ghost"
_hover={{ backgroundColor: footerHoverBg[colorMode] }}
/>
</Link>
<Link
href="https://www.youtube.com/benjamincarlson"
title="YouTube"
isExternal
>
<IconButton
aria-label="YouTube"
icon={<FiYoutube />}
size="lg"
color={borderIcon[colorMode]}
variant="ghost"
_hover={{ backgroundColor: footerHoverBg[colorMode] }}
/>
</Link>
<Link href="mailto:[email protected]" title="Email" isExternal>
<IconButton
aria-label="Email"
icon={<FiMail />}
size="lg"
color={borderIcon[colorMode]}
variant="ghost"
_hover={{ backgroundColor: footerHoverBg[colorMode] }}
/>
</Link>
</div>
</Flex>
</Box>
)
}
