@font-face {
    /* * font-family: This is the name you will use to reference the font later 
     * in your CSS (e.g., when styling the .icon-twitter:before selector).
     */
    font-family: 'X-Icon-Font';
    /* * src: This points the browser to the actual font files. You should include 
     * multiple formats (WOFF, WOFF2, TTF) for maximum browser compatibility.
     * The file path must be correct relative to where your CSS file is located.
     */
    src: url('/corp/img/twitter_x.woff') format('woff');
    /* * font-weight: Only necessary if you have multiple weights (e.g., thin, bold). 
     * For a single icon font, set to normal.
     */
    font-weight: normal;
    /* * font-style: Usually set to normal for icon fonts.
     */
    font-style: normal;
    /* * font-display: Highly recommended. Tells the browser how to handle loading 
     * (e.g., 'swap' allows the text to show while the font is loading, then swaps to the font).
     */
    font-display: swap;
}
.fa-twitter-square:before {
    /* Use the font-family name defined above */
    font-family: 'X-Icon-Font';
    /* You must use the Unicode character that the font designer assigned to the X icon. 
     * Example: If the X is mapped to F309 in your new font:
     */
    content: "\e800" !important;
    /* Make sure the text color is set to the color you want the icon to be */
    color: #000000;
    font-size: .8em;
    position: relative;
    top: -2px;
}

.fa-twitter:before {
    /* Use the font-family name defined above */
    font-family: 'X-Icon-Font';
    /* You must use the Unicode character that the font designer assigned to the X icon. 
     * Example: If the X is mapped to F309 in your new font:
     */
    content: "\e800";
    /* Make sure the text color is set to the color you want the icon to be */
    color: #000000;
}