since we can have icons from the media library – upload the svg file- maybe from here : https://uxwing.com/substack-icon/

goto list view in your media library and copy the id of that svg file. ( in my case it is : 54209)

then enter on your child-theme functions.php:
(replace with your ID)

function avia_add_custom_icons($icons){
  $icons['substack'] =  array( 'font' =>'svg_wp-media-library', 'icon' => '54209', 'display_name' => 'Substack');
    return $icons;
  }
add_filter('avf_default_icons','avia_add_custom_icons', 10, 1);

function avia_add_custom_social_icon($icons){
    $icons['substack'] = 'substack';
    return $icons;
}
add_filter('avf_social_icons_options', 'avia_add_custom_social_icon', 10, 1);

for styling:

#header_meta .social_bookmarks_substack svg path {
  fill: var(--enfold-header-color-meta) !important;
}

#header_meta .av-social-link-substack:hover a {
  background-color: #FF681A !important;
}

#header_meta .av-social-link-substack:hover svg path {
  fill: #FFF !important;
}

by the way – on : https://wakamaifondue.com/
you can upload one of those font-files i created – to see what is all inside my woff2. ;)

and second: if you need Main Hebrew Block (U+0590–U+05FF): Contains Alef–Tav, Niqqud (points), cantillation marks, and punctuation (e.g., Qaf). i had to include them for you.

one big misunderstanding is that you do not enter in those custom-class fields the classname with a dot:
Enter parking not .parking

First :
Cross-Origin Resource Sharing (CORS)
Safari often blocks media if it is loaded from a different domain (including a subdomain or a CDN proxy such as usercontent.one), unless the server explicitly sends the correct CORS headers.
If the main page is hosted on rootsandjazz.dk but the video comes from usercontent.one, Safari treats this as a “cross-origin” request.
If the HTTP header is missing an Access-Control-Allow-Origin: *, Safari will block the content, while other browsers are often more lenient.

…
Second:
Byte-Range Requests (The Prime Suspect)
Safari requires that the server support byte-range requests for video files. This means that Safari does not request the entire file at once, but rather in small chunks.
Proxies or CDNs (such as the usercontent.one system) are sometimes configured to deliver files only as “whole” units.
If the server does not respond with a 206 Partial Content status code, Safari simply aborts the loading process.

________

Next:
Check the file format: Make sure the video is encoded as H.264 MP4. Safari often has issues with unusual encodings when served via a CDN.

Trial:
.htaccess configuration: If you have access to the .htaccess file, you could try explicitly allowing CORS:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

But:
There is a 90% chance that this is due to the way usercontent.one delivers the file (byte-range support). The user should try disabling the “Performance Cache” or “CDN” for the media library in the One.com dashboard.
_____________
Here’s a quick tip: You can test this yourself by opening Safari’s Web Developer Tools (Cmd + Option + I) and checking the “Network” tab. If the status code for the video file shows as 200 OK but Safari doesn’t play the video, then support for 206 Partial Content is definitely missing.

yes – but you can add a class to the accordion element itself.

then you can select by:

.togglecontainer.custom-class  .av_toggle_section:nth-child(9) .toggler.activeTitle {
  background-color: #5b9bd4;
  color: #003247; 
}

so you can address even if you got multiple accordions on one page.

btw. you can select by that ID:

#toggle-my-special-toggler.activeTitle – the ID : my-special-toggler goes directly to the toggler

FOIT – Flash of Invisible Text Effect

To give it a name for the sake of clarity, the effect is called “Flash of Invisible Text.” This means our text content flashes briefly after the web font has loaded. Of course, the abbreviation sounds better: FOIT (“Flash Of Invisible Text”).

The normal process is that while the font is still loading, text is automatically displayed in the system font after 3 seconds. We can speed this up using the CSS directive font-display: swap;.

However, what is intended for fonts prevents icon fonts from loading correctly—because they have no browser fallback equivalent.

Or read here for more info: https://css-tricks.com/almanac/properties/f/font-display/

if you look the rule:

#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont="entypo-fontello"]::before {
  font-family: 'entypo-fontello';
}

you see what is the crux: no fallback Font – so if you swap those icon-fonts – the browser does not know what to show.

here you see the wanted behaviour by swap:

h1 {
  font-family:'opensans-flex',Helvetica,Arial,sans-serif
}

if the browser is still loading the opensans-flex files – it will show your content with Helvetica instead.

EDIT: It is incredibly difficult to transfer the size from the left side of the TinyMCE editor to the preview on the right, depending on the SVG property. And all while preserving the “floating” property.

how did you “when i add a SVG icon to a page,”

if it is an Enfold Element like image or image with hotspot ect. – Enfold actually has CSS rules within avia-builder.css / avia-builder.min.css for these cases.
if you like to influence the preview inside textblock and backend:

you can set via child-theme functions.php that preview size.

function admin_head_mod(){
echo '<style type="text/css">
  .wp-admin .avia_textblock img[src*=".svg"] {width: 80px !important;height: auto !important;}
</style>';
}
add_action('admin_head', 'admin_head_mod');

the point is the even not inline svgs need an absolute dimension ( % and auto will not work )

but:

this part where enfold loads this css for the preview window is inside: class-template-builder.php
there are filters we can use to influence the preview now.

place a file custom-preview-fix.css inside enfold-child/css/

add_filter('avf_preview_window_css_files', function($css) {
    $css[ get_stylesheet_directory_uri() . '/css/custom-preview-fix.css' ] = 1;
    return $css;
}, 999);

and have inside custom-preview-fix.css:

#av-admin-preview img[src*=".svg"]:not([is-svg-img="true"]) {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

#av-admin-preview .alignleft { float: left; margin: 0 20px 20px 0; }
#av-admin-preview .alignright { float: right; margin: 0 0 20px 20px; }
#av-admin-preview .aligncenter { display: block; margin-left: auto; margin-right: auto; }

Edit: something new to me – yes Mike is right – it is the “different” mobile menue – and you choose the same menue as the desktop menue.

______________
For me a mobile Menue is always the hamburger one on enfold –

But even then – there is no conflict because what is id in text-menu ist a class on hamburger menue.
My suggestion is that you use a footer-menue in this way:

this will end in duplicate ID’s

understanding that flexbox layout:
https://webers-testseite.de/flex-columns-understanding/

Not really—don’t use the “equal-height” option; instead, set the “align-items: stretch” option for the flex container.
Take another look at the example page.
By the way: “align-items: stretch” is the default value on flex containers — so you don’t need to specify it explicitly.

_____________ just for info ______________

/* === flex container settings (default values):  === */
flex-direction: row	  /* === Side by side, not one below the other. === */
flex-wrap: nowrap   /* === Everything on a single line, no line breaks. === */
justify-content: flex-start  /* === Everything left-aligned (on the vertical axis). === */
align-items: stretch  /* === Full height (on the horizontal axis). === */

/* === Items Settings (default values):   === */
flex-grow: 0   /* === No automatic filling of empty space. === */
flex-shrink: 1  /* === Shrinking is permitted if space is limited. === */

see my post above.

Are you using any caching tools ? They mostly got an option to clear the cache, if you edit (update) a post/page.
Next: Browser do also Cache Pages. Sometimes they deliver the cached Content. etc.

btw. : have a look what happens to your top divider on home page if you add this to your quick css:

#top.home #av_section_1 .avia-divider-svg.avia-divider-svg-top {
  transform: scaleY(-1);
  top: -39px;
}

#top.home #av_section_1 .avia-divider-svg.avia-divider-svg-top svg {
  fill: #FFF !important;
}

#top.home #av_section_1 .scroll-down-link {
  bottom: 25px;
}