Add this to functions.php to enable psuedo elements:
0 1 2 3 4 5 6 | function jma_child_scripts() { wp_add_inline_script('fontawesome', 'window.FontAwesomeConfig={searchPseudoElements:true}', 'before'); } add_action('wp_enqueue_scripts', 'jma_child_scripts'); |
The CSS:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | .quote { margin-bottom: 20px; } .quote blockquote { font: 14px/20px italic Arial, Helvetica, sans-serif; padding: 8px; margin: 5px; text-indent: 40px; border-color: rgba(253, 186, 49, 0.5); position: relative; } .quote blockquote::before, .quote blockquote::after { font-family: "Font Awesome 5 Free"; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-weight: 900; display: none; } .quote blockquote .fa-quote-left, .quote blockquote .fa-quote-right { color: rgba(253, 186, 49, 0.5); font-size: 1.8em; position: absolute; z-index: 10; } .quote blockquote::before { content: "\f10d"; } .quote blockquote .fa-quote-left { top: 0; left: 10px; background-position: top left; } .quote blockquote::after { content: "\f10e"; } .quote blockquote .fa-quote-right { bottom: 0; right: 0; background-position: bottom right; } .quote blockquote p { padding-right: 20px; color: #113871; font-size: 1.5em; z-index: 20 } .quote cite { font-size: 1.6em; color: #fdba31; } |
For Bubbles with “Tags”
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .quote { margin-bottom: 20px; } .testimonials-text:after { width: 0; height: 0; content: " "; display: block; color: #f5f5f5; position: absolute; border-top-color: #f5f5f5; border-left-style: inset; border-right-style: inset; border-top: 22px solid; border-left: 0 solid transparent; border-right: 22px solid transparent; left: 80px; bottom: -20px; } .testimonials-text { padding: 15px; font-size: 14px; font-style: italic; background: #f5f5f5; position: relative; border: none; border-radius: 10px; } |