Recommended Free Tools
If a Font Awesome icon is missing from an html2canvas image on an iPhone or iPad, first determine whether it is absent from the live page or only from the generated canvas. A live-page failure usually means a Font Awesome setup or asset-loading problem. If the icon is visible in Safari but absent from the canvas, reduce the case to one icon, inspect resource errors, and test an inline SVG or text fallback in html2canvas’s cloned document with onclone. No documented option is a universal fix for every current iOS and html2canvas combination.
1. Identify which rendering path is failing
html2canvas is not a pixel screenshot tool. It walks the DOM, reads supported styles and assets, and reconstructs them in a canvas. The reconstructed result can therefore differ from what Safari paints on screen. See the html2canvas documentation for this model.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Apple iPhone 14, 128GB, Midnight - Unlocked (Renewed) | $300.00 | Buy on Amazon |
| 2 |
|
Apple iPhone 16, 128GB, Pink - Unlocked (Renewed) | $574.99 | Buy on Amazon |
| 3 |
|
Apple iPhone 15, 128GB, Black - Unlocked (Renewed) | $405.00 | Buy on Amazon |
| 4 |
|
Apple iPhone 13, 128GB, Midnight - Unlocked (Renewed) | $262.00 | Buy on Amazon |
| 5 |
|
Apple iPhone 16e, 128GB, Black - Unlocked (Renewed) | $385.00 | Buy on Amazon |
- Missing live and in the image: fix Font Awesome setup or loading first.
- Visible live, missing only in the image: investigate html2canvas’s reconstruction of the icon’s webfont or SVG.
- Only edges are cut off: inspect the icon container’s height, line-height and overflow; this is different from a completely blank icon.
- The whole canvas fails or becomes unreadable: investigate canvas security and image-loading errors separately.
Record the iOS/iPadOS version, browser, html2canvas version, Font Awesome version, icon name and style, rendering method (CSS/webfont, SVG+JS or inline SVG), and whether assets are same-origin. Those details make a reproduction useful.
2. If the icon is missing from the live page
Verify the Font Awesome setup
Use Font Awesome’s troubleshooting guidance to check the stylesheet or Kit, the icon’s exact name, and its style class. A solid icon and a regular icon can have different classes, and a typo can leave an empty element.
#1 Best Overall
- This phone is unlocked and compatible with any carrier of choice on GSM and CDMA networks (e.g. AT&T, T-Mobile, Sprint, Verizon, US Cellular, Cricket, Metro, Tracfone, Mint Mobile, etc.).
- Please check with your carrier to verify compatibility.
- The device does not come with headphones or a SIM card. It does include a generic (Mfi certified) charging cable.
- Tested for battery health and guaranteed to have a minimum battery capacity of 80%.
Check the actual network responses
On the affected device, use Safari’s Web Inspector (enable Settings → Safari → Advanced → Web Inspector, then connect the device to Safari on macOS) or reproduce with remote debugging. Confirm that the CSS, font files or SVG assets return successfully, are not blocked by a content-security policy, and use the expected paths. A 404 stylesheet or font explains a blank icon before html2canvas runs.
Confirm the method you chose
Font Awesome documents both web-font and SVG approaches, with browser-support notes at Browser Support. Make sure the markup matches the method you loaded. If you use SVG+JavaScript, verify that the replacement SVG is actually present in the DOM at capture time; if you use webfonts, verify that the font request completed before capture.
3. Build a minimal reproduction
- Keep one icon and the smallest possible wrapper.
- Remove animations, transforms, lazy components and unrelated third-party widgets.
- Wait until the icon is visibly rendered, then call html2canvas.
- Capture the same element on the affected iOS device and on a desktop browser.
- Save console messages and failed requests, and note all versions.
This distinguishes a Font Awesome loading defect from a limitation in html2canvas’s DOM reconstruction. The old GitHub issue #1610 is not proof of a current iOS bug: it was opened in 2018 for html2canvas 1.0.0-alpha.12 and Safari 10.1.2 on OS X Yosemite.
Rank #2
- 6.1" Super Retina XDR OLED, HDR10, Dolby Vision, 1000nits (typ), 2000nits (HBM), 2556x1179px at 460ppi, 3561mAh Battery
- 128GB 8GB RAM, Apple A18 (3nm), Hexa-core (2x4.04 GHz + 4x2.20 GHz), Apple GPU 5-core, 16‑core Neural Engine
- Rear camera: 48MP, f/1.6, wide + 12MP, f/2.2, ultrawide, Front Camera: 12MP, f/1.9, wide, iOS 18, upgradable to iOS 18.5
- 4G LTE: 1/2/3/4/5/7/8/12/13/14/17/18/19/20/25/26/28/29/30/32/34/38/39/40/41/42/48/53/66/71, 5G: n1/2/3/5/7/8/12/14/20/25/26/28/29/30/38/40/41/48/53/66/70/71/75/76/77/78/79 - Dual eSIM
- Unlocked for freedom to choose your carrier. Compatible with both GSM & CDMA networks. The phone is unlocked to work with all GSM Carriers & CDMA Carriers Including AT&T, T-Mobile, Verizon, Sprint., Etc.
4. Test a fallback in html2canvas’s cloned document
The onclone callback lets you alter the cloned document immediately before html2canvas renders it. You can replace the problematic icon only in that clone, leaving the live page unchanged. This is a diagnostic and compatibility technique, not a vendor-guaranteed cure.
const target = document.querySelector('#receipt');
html2canvas(target, {
onclone: (clonedDocument) => {
const icon = clonedDocument.querySelector('.fa-credit-card');
if (!icon) return;
// Test 1: ordinary text fallback
icon.textContent = '▣';
icon.className = 'capture-icon-fallback';
icon.setAttribute('aria-label', 'Payment method');
}
}).then(canvas => {
document.querySelector('#preview').replaceChildren(canvas);
});Use a CSS rule in the page for .capture-icon-fallback so its size and alignment match the original. If text appears in the output while the Font Awesome glyph does not, the failure is likely tied to the webfont reconstruction path. Restore the original class and repeat with a literal inline SVG.
Inline SVG test
html2canvas(document.querySelector('#receipt'), {
onclone: (doc) => {
const icon = doc.querySelector('.fa-credit-card');
if (!icon) return;
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" aria-label="Payment method" role="img">
<path fill="currentColor" d="M3 5h18v14H3zM3 9h18"/>
</svg>`;
icon.className = 'capture-svg-icon';
}
});Use your own licensed icon path and styling. Compare the generated image on the target iPhone or iPad, not only in desktop DevTools. Keep accessible text or an ARIA label when the icon conveys meaning.
Rank #3
- 6.1inch Super Retina XDR display. Aluminum with color-infused glass back. Ring/Silent switch
- Dynamic Island. A magical way to interact with iPhone. A16 Bionic chip with 5-core GPU
- Advanced dual-camera system. 48MP Main | Ultra Wide. Super-high-resolution photos (24MP and 48MP). Next-generation portraits with Focus and Depth Control. 4X optical zoom range
- Emergency SOS via satellite. Crash Detection. Roadside Assistance via satellite
- Up to 26 hours video playback. USB C, Supports USB 2. Face ID
5. Understand what useCORS can and cannot do
html2canvas’s useCORS option concerns loading images. It does not universally repair Font Awesome fonts or SVGs, and it cannot bypass browser content-security rules. The configuration reference documents useCORS, proxy and onclone.
If your page includes cross-origin images, the image server must send an appropriate Access-Control-Allow-Origin response. Otherwise the canvas may be tainted or the image omitted. A configured proxy is another documented route for eligible images. Treat this as a separate problem from a missing Font Awesome glyph.
6. Fix clipped, rather than missing, icons
When the glyph is present but its top or bottom is cut off, inspect the parent’s fixed height, line-height and overflow:hidden. Font Awesome’s Icon Canvas guidance describes increasing the container height or adding vertical padding for this type of clipping. Do not apply that explanation to an entirely blank icon without checking asset loading first.
Rank #4
- This pre-owned product is not Apple certified, but has been professionally inspected, tested and cleaned by Amazon-qualified suppliers.
- There will be no visible cosmetic imperfections when held at an arm’s length.
- This product is eligible for a replacement or refund within 90 days of receipt if you are not satisfied.
- Product may come in generic Box.
7. Choose a rendering strategy deliberately
| Path | What to test | Trade-off |
|---|---|---|
| Webfont glyph | Font request, CSS class, load timing and same-origin policy | Compact markup, but reconstruction may not reproduce the glyph on every browser/device combination |
| SVG+JavaScript | Replacement SVG exists before capture | Explicit geometry, but script timing and generated markup must be captured |
Inline SVG in onclone |
Literal SVG renders in the cloned document | Useful compatibility test; requires maintaining an SVG path |
| Text fallback | Font-independent character and accessible label | Most robust diagnostic, but appearance may not match the icon exactly |
Compare visual fidelity, accessibility, asset origin and response headers. The available documentation does not establish a universally best choice or a current-iOS success rate.
8. Troubleshooting by symptom
Icon is blank everywhere
- Check the Font Awesome stylesheet or Kit URL and its HTTP status.
- Verify the icon name and style class.
- Inspect font or SVG requests for 404, CORS, CSP or MIME-type errors.
- Confirm the element is not hidden by CSS or replaced by a failed SVG script.
Icon is live but absent only in the canvas
- Reduce to one icon.
- Try the text and inline-SVG
onclonesubstitutions. - Capture after the icon is visibly ready.
- Test the same code with the exact iOS and library versions recorded.
Canvas throws a security or taint error
- List every cross-origin image, not just the icon.
- Enable
useCORSonly when the image server sends compatible CORS headers. - Use a documented proxy where appropriate; neither setting bypasses browser security.
Only icon edges are clipped
- Increase parent height or vertical padding.
- Review line-height and remove or adjust
overflow:hidden.
Canvas is blank or crashes on an older device
The html2canvas FAQ notes that iOS Safari canvas limits can depend on device RAM. Reduce the capture area, avoid unnecessarily large dimensions, and test on the actual device. General Safari support does not guarantee identical behavior for every DOM feature.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is a reliable page image rather than testing html2canvas itself, ScreenshotNeo captures the URL server-side with one request. Before capture it accepts cookie/consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Example (see the ScreenshotNeo API documentation):
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://example.com/receipt
-o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com/receipt"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com/receipt'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
Best Value
- 6.1" Super Retina XDR OLED, HDR10, 800 nits (HBM), 1200 nits (peak), 2532x1170px at 460ppi, 4005mAh Battery
- 8GB RAM, Apple A18 6-core CPU (2 performance + 4 efficiency cores), Apple GPU 4-core, 16‑core Neural Engine
- Rear camera: 48MP, f/1.6, wide, Front Camera: 12MP, f/1.9, wide, iOS 18.3.1, upgradable to iOS 18.5
- Connectivity: Global 4G LTE, Sub-6 GHz 5G, LTE, Wi-Fi 6, Bluetooth 5.3, NFC, USB-C, Wireless Charging (7.5W). (does not have mmWave 5G or MagSafe or physical SIM card) - Dual eSIM Only
- Unlocked for freedom to choose your carrier. Compatible with both GSM & CDMA networks. The phone is unlocked to work with all GSM Carriers & CDMA Carriers Including AT&T, T-Mobile, Verizon, Straight Talk., Etc.
9. FAQ
Does useCORS: true fix Font Awesome fonts?
No. It is documented for image loading and cannot override browser security or guarantee font and SVG compatibility.
Should I replace Font Awesome permanently?
Not automatically. First establish whether the live page or only html2canvas fails, then compare SVG and text fallbacks against your fidelity and accessibility requirements.
Is the 2018 Safari GitHub issue evidence of a current iPhone bug?
No. Its environment was desktop Safari 10.1.2, OS X Yosemite and an alpha html2canvas release, so reproduce with your current versions.
Free tools Windows power users keep installed
One-click scans. No signup required.
Can html2canvas capture any page exactly as displayed?
No. It reconstructs supported DOM features and remains subject to browser asset and canvas security policies.
The Bottom Line
Fix live Font Awesome loading first; if only html2canvas fails, isolate one icon and test an inline SVG or text fallback through onclone. Treat useCORS as an image option, correct clipping separately, and verify every workaround on the target iOS device.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
