Here’s a short cheatsheet of Elegant Theme’s Divi icons:
/************************************ MENU ICONS **********************************/
/*** QUOTE MARKS ***/ .et-icon-1 a:before { content: "\7c"; }
/*** CLOCK FACE ***/ .et-icon-2 a:before { content: "\7d"; }
/*** CLOSED PADLOCK ***/ .et-icon-3 a:before { content: "\7e"; }
/*** KEY ***/ .et-icon-4 a:before { content: "\e001"; }
/*** CLOUD ***/ .et-icon-5 a:before { content: "\e002"; }
/*** LANDSCAPE IMAGE ICON ***/ .et-icon-6 a:before { content: "\e005"; }
/*** LIGHTBULB ***/ .et-icon-7 a:before { content: "\e007"; }
/*** CAMERA ***/ .et-icon-8 a:before { content: "\e00f"; }
/*** ENVELOPE ***/ .et-icon-9 a:before { content: "\e010"; }
/*** CREDIT CARD ***/ .et-icon-10 a:before { content: "\e014"; }
/*** SHOPPING CART ***/ .et-icon-11 a:before { content: "\e015"; }
/*** LOCATION PIN ***/ .et-icon-12 a:before { content: "\e01d"; }
/*** CALENDAR ***/ .et-icon-13 a:before { content: "\e023"; }
/*** CONTACTS BOOK ***/ .et-icon-14 a:before { content: "\e026"; }
/*** HEART ***/ .et-icon-15 a:before { content: "\e030"; }
/*** COFFEE CUP ***/ .et-icon-16 a:before { content: "\e105"; }
/*** WALLET ***/ .et-icon-17 a:before { content: "\e100"; }
/*** BRIEFCASE ***/ .et-icon-18 a:before { content: "\e0fe"; }
/*** STAR ***/ .et-icon-19 a:before { content: "\e031"; }
/*** HOME ***/ .et-icon-20 a:before { content: "\e009"; }
/*** LINK CHAIN ***/ .et-icon-21 a:before { content: "\e02c"; }
/*** LIKE THUMBS UP ***/ .et-icon-22 a:before { content: "\e106"; }
/*** HOURGLASS ***/ .et-icon-23 a:before { content: "\e0e1"; }
/*** PIE CHART ***/ .et-icon-24 a:before { content: "\e029"; }
}
/************************************* END *****************************************/
Here’s what they look like:
Here’s a problem I had: I was encountering CORS errors when trying to load a font from a WordPress site. What are the best ways to resolve this cross-origin font loading issue?
These errors are related to Cross-Origin Resource Sharing (CORS) and typically occur when a web page tries to load a resource (in this case, a font file) from a different domain. Here are some approaches to address these issues:
- Server-Side Solutions (Recommended):
- The website owner should configure their server to send appropriate CORS headers
- For a WordPress site using the Divi theme, this typically involves adding headers in the .htaccess file or through server configuration
- Browser Extension Workarounds:
- Temporarily disable CORS restrictions using browser extensions like “CORS Unblock” or “Allow CORS” for testing
- Note: This is only for development and should not be used in production
- Proxy Solution:
- Set up a proxy server that adds the necessary CORS headers
- Use a service like CORS Anywhere or create your own proxy
- Local Workaround:
- Download the font file and host it locally on your own server
- Update the font source in your CSS to point to the local file
- Web Font Alternative:
- Use a web font service like Google Fonts that handles cross-origin issues
- Replace the problematic font with a similar web font
The best long-term solution is for the website owner to properly configure CORS headers on their server. If you’re the website owner, you would typically add something like this to your .htaccess file:
<IfModule mod_headers.c>
<FilesMatch "\.(woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>