Builder

Start

Icon Picker

Color Picker

Effect Picker

Width

Results

Directions

                            
                               
                            Directions: 

                            1. Be sure to put this CDN link to Font Awesome in the head of your HTML document to ensure the icons will display properly.
                            
                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
                            
                            2. Copy the HTML result into the body of your HTML document where you want the admonition to appear.

                            3. Copy the CSS result into your HTML page head section within <style> tags or put the CSS into a separate CSS style document and link to it in the head section of the HTML document.

                            4. Finally, if you chose the animation effect, be sure to copy the JavaScript result code and put it between <script> tags before the closing body tag 
                            in your HTML document.  You can also put the JavaScript code in a separate Javascript file and link to it if you choose.
                           
                        

HTML Result

                               
                            HTML markup results will display here.
                           
                        

CSS Result

                            
                               
                            CSS results will display here.
                            
                           
                        

JavaScript Result

                            
                               
                            JavaScript results will display here.