react-icons/fa#FaQuoteLeft JavaScript Examples
The following examples show how to use
react-icons/fa#FaQuoteLeft.
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: Quotes.js From devfolio with MIT License | 6 votes |
|
Quotes = () => {
return (
<section className="section bg-grey">
<Title title="Favourite Quote" />
<div className="section-center quote-center fa-quote-left" id="single-quote">
<p>
<FaQuoteLeft style={{marginRight: "0.3em", color: "#49aeba"}}/>
Your work is going to fill a large part of your life, and
the only way to be truly satisfied is to do what you believe
is great work. And the only way to do great work is to love
what you do. If you haven’t found it yet, keep looking.
Don’t settle. As with all matters of the heart, you’ll know
when you find it.
</p>
<p className="about-steve"><span style={{color: "#49aeba",fontWeight:"600"}}>- Steve Jobs</span></p>
</div>
</section>
)
}
Example #2
| Source File: index.js From layer5-ng with Apache License 2.0 | 5 votes |
|
Testimonial = () => {
const ArrowLeft = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-prev-icon">
<IoIosArrowRoundBack />
</button>
);
const ArrowRight = ({ currentSlide, slideCount, ...props }) => (
<button {...props} className="slick-arrow slick-next-icon">
<IoIosArrowRoundForward />
</button>
);
const settings = {
customPaging: function(i) {
return (
<a>
<img src={data.thumbs[i]} alt="img" />
</a>
);
},
dots: true,
dotsClass: "slick-dots testimonial__thumb",
autoplay: true,
infinite: true,
speed: 1500,
slidesShow: 1,
slidesToScroll: 1,
prevArrow: <ArrowLeft />,
nextArrow: <ArrowRight />
};
return (
<TestimonialWrapper id="testimonial">
<Container>
<Row>
<Col xs={12}>
<SectionTitle leftAlign={true} className="testmonial__heading">
<h4>Testimonial</h4>
<h2>
<span>What our client says </span> about us
</h2>
</SectionTitle>
<SlickSlider {...settings} className="testimonial__slider">
{data.testimonials.map((testimonial, index) => (
<SliderItem key={index}>
<p>
<FaQuoteLeft />
{testimonial.quote}
</p>
<div className="slider__meta">
<img src={testimonial.thumb} alt="img" />
<div className="testimonial-client">
<h6>{testimonial.author}</h6>
<p>{testimonial.dsignation}</p>
</div>
</div>
</SliderItem>
))}
</SlickSlider>
</Col>
</Row>
</Container>
</TestimonialWrapper>
);
}
Example #3
| Source File: Testimonials.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Testimonials() {
const { theme } = useContext(ThemeContext);
const sliderRef = useRef();
const settings = {
dots: true,
adaptiveHeight: true,
infinite: true,
speed: 800,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
margin: 3,
loop: true,
autoplaySpeed: 3000,
draggable: true,
swipeToSlide: true,
swipe: true,
};
const gotoNext = () => {
sliderRef.current.slickNext();
};
const gotoPrev = () => {
sliderRef.current.slickPrev();
};
return (
<>
{testimonialsData.length > 0 && (
<div
className='testimonials'
style={{ backgroundColor: theme.primary }}
>
<div className='testimonials--header'>
<h1 style={{ color: theme.secondary }}>Testimonials</h1>
</div>
<div className='testimonials--body'>
<FaQuoteLeft
className='quote'
style={{ color: theme.secondary }}
/>
<div
className='testimonials--slider'
style={{ backgroundColor: theme.primary }}
>
<Slider {...settings} ref={sliderRef}>
{testimonialsData.map((test) => (
<div
className='single--testimony'
key={test.id}
>
<div className='testimonials--container'>
<div
className='review--img'
style={{
backgroundColor:
theme.secondary,
}}
>
<img
src={test.image}
alt={test.name}
/>
</div>
<div
className='review--content'
style={{
backgroundColor:
theme.secondary,
color: theme.tertiary,
}}
>
<p>{test.text}</p>
<h1>{test.name}</h1>
<h4>{test.title}</h4>
</div>
</div>
</div>
))}
</Slider>
<button
className='prevBtn'
onClick={gotoPrev}
style={{ backgroundColor: theme.secondary }}
>
<FaArrowLeft
style={{ color: theme.primary }}
aria-label='Previous testimonial'
/>
</button>
<button
className='nextBtn'
onClick={gotoNext}
style={{ backgroundColor: theme.secondary }}
>
<FaArrowRight
style={{ color: theme.primary }}
aria-label='Next testimonial'
/>
</button>
</div>
</div>
</div>
)}
</>
);
}
