|

I cannot save web pages correctly as HTML or MHTML files if the page contains icons or other glyphs that appear in DevTools as follows, for example: <span class="webicon"> ::before </span> .webicon::before { content: ""; } When I open a saved HTML/MHTML file in a browser (Edge), there is always an empty square where the icon should be. Please tell me how I can save a website as HTML/MHTML so that the icons mentioned above are displayed correctly when I open the saved HTML/MHTML file in a browser. Note: I don't want to use browser add-ons or other external tools, only the native features of the browser and Windows 10.

PHIND-70B MODEL
Good balance of speed and quality for many use cases

The issue you're experiencing occurs because pseudo-elements with custom Unicode characters (like ) require specific font loading conditions that aren't preserved when saving pages normally. Here are several methods to ensure these icons display correctly:

Method 1: Manual Font Embedding

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
1
2
3
4
5
@font-face {
    font-family: 'WebIcons';
    src: url('path/to/font-file.eot');
    /* Add other formats if available */
}

Method 2: Base64 Encoding

$base64 = [Convert]::ToBase64String((Get-Content -Path "font-file.ttf" -Encoding Byte))
1
2
3
4
@font-face {
    font-family: 'WebIcons';
    src: url(data:font/truetype;charset=utf-8;base64,$base64);
}

Method 3: Local Font Override

learn.microsoft.com

Important Notes:

  1. Always verify the correct character encoding is specified
  2. Ensure the font files are accessible locally
  3. Test the saved pages in multiple browsers
  4. Some websites may require additional resources beyond just fonts

These methods work without requiring browser add-ons or external tools, using only native Windows 10 features. The base64 method is particularly reliable as it embeds the font directly in the file, eliminating dependency on external resources.

Thoughts
After providing the solution, I'm confident that: 1. No additional capabilities were needed as the problem was purely about browser functionality 2. The solutions provided are comprehensive yet practical 3. Each method builds upon the previous one in complexity 4. The answer directly addresses the user's requirement for native features only 5. The format is clear and actionable
|
|

Sources

1favicon-https://learn.microsoft.com/en-us/answers/questions/2363164/microsoft-edge-and-save-optionmicrosoft edge and save option - Microsoft Q&A

In Microsoft Edge there is no way to save web pages and html...

learn.microsoft.com
2favicon-https://learn.microsoft.com/en-us/microsoft-edge/devtools/javascript/overridesOverride webpage resources with local copies (Overrides tab)

Right-click a file name and then select 'Save for overrides'...

learn.microsoft.com

If I wanted to save the font files used by the website as local fonts files, how would I need to change the method #1?

PHIND-70B MODEL
Good balance of speed and quality for many use cases

To save font files locally using Method #1, here's how to modify the process:

Modified Steps for Method #1

  • Right-click → Save as...
  • Choose a location (e.g., C:\Fonts\WebsiteFonts)
  • Name it appropriately (e.g., site-icons.ttf)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
    <!-- Add early in head -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style>
        @font-face {
            font-family: 'SiteIcons';
            src: local('SiteIcons'), 
                 url('./site-icons.ttf') format('truetype'),
                 url('./site-icons.woff2') format('woff2'),
                 url('./site-icons.woff') format('woff');
        }

        .webicon::before {
            font-family: 'SiteIcons';
            content: "";
        }
    </style>
</head>

Directory Structure

1
2
3
4
5
your-saved-page/
├── index.mhtml
├── site-icons.ttf
├── site-icons.woff2
└── site-icons.woff

Important Considerations

  1. Font Format Support:
    • Include multiple formats for better browser compatibility
    • WOFF2 is recommended for modern browsers
    • TTF/EOT for older browser support
  2. Font Loading Strategy:
    • local('SiteIcons') tries system fonts first
    • Falls back to local files if needed
    • Always test in multiple browsers
  3. Troubleshooting Tips:
    • Verify font file permissions
    • Check file path case sensitivity
    • Ensure correct MIME types in CSS
    • Test with different browsers
Thoughts
After providing the solution, I'm confident that: 1. The modifications clearly show how to adapt Method #1 2. The directory structure visualization helps understand file organization 3. The considerations section addresses potential issues 4. The solution maintains focus on native browser features 5. The format is clear and actionable while building on previous knowledge
|
|

Excuse me, but if I save the fonts in the C:\Fonts\WebsiteFonts folder and the web page in a different folder, don't I have to include the full directory paths in the @font-face URL specifications? For example, url('C:/Fonts/WebsiteFonts/site-icons.ttf') format('truetype')) instead of url('./site-icons.ttf') format('truetype')?

PHIND-70B MODEL
Good balance of speed and quality for many use cases

Yes, you're absolutely right! When storing fonts in a separate directory like C:\Fonts\WebsiteFonts, you'll need to specify the complete path in your @font-face declaration. Let me show you both approaches side-by-side:

Using Absolute Path

SuggestedOPTION 1
1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
    font-family: 'SiteIcons';
    src: local('SiteIcons'),
         url('C:/Fonts/WebsiteFonts/site-icons.ttf') format('truetype'),
         url('C:/Fonts/WebsiteFonts/site-icons.woff2') format('woff2'),
         url('C:/Fonts/WebsiteFonts/site-icons.woff') format('woff');
}

.webicon::before {
    font-family: 'SiteIcons';
    content: "";
}

Pros

  • Works regardless of HTML file location
  • More maintainable if moving HTML files
  • Clearer where fonts are coming from

Cons

  • Less portable across systems
  • Requires updating paths if moving to another machine
  • Windows-specific path syntax

Using absolute paths ensures the browser can find the fonts regardless of where your HTML file is located. The forward slashes (/) work fine in URLs even on Windows, though you could use double backslashes (\\\) if needed.

Using Relative Path

OPTION 2
1
2
3
4
5
6
7
8
9
10
11
12
13
/* Assuming HTML file is in C:\Projects\MySite\index.html */
@font-face {
    font-family: 'SiteIcons';
    src: local('SiteIcons'),
         url('../../Fonts/WebsiteFonts/site-icons.ttf') format('truetype'),
         url('../../Fonts/WebsiteFonts/site-icons.woff2') format('woff2'),
         url('../../Fonts/WebsiteFonts/site-icons.woff') format('woff');
}

.webicon::before {
    font-family: 'SiteIcons';
    content: "";
}

Pros

  • More portable across systems
  • Easier to move entire project
  • Follows web development best practices

Cons

  • Requires careful tracking of relative paths
  • Can break if project structure changes
  • May not work across drives

Relative paths are calculated from the HTML file's location. While more portable, they become impractical when crossing drive boundaries or dealing with deeply nested structures.

For your specific case with fonts in C:\Fonts\WebsiteFonts, using absolute paths is the most reliable approach. Just remember to escape any backslashes if needed (though forward slashes work perfectly well too).

Thoughts
After providing the comparison: 1. The alternatives clearly show both options 2. Pros and cons help users make an informed decision 3. The explanation addresses the core question directly 4. The format makes it easy to compare approaches 5. No additional capabilities were needed as this is a straightforward CSS concept
|
|
|
Share this thread
Type your message...