These are requirements that can be better realised by special plug-ins.
I use on that https://wordpress.org/plugins/youtube-embed-plus/
you can see here a page of a friend – where i set up with enfold a “youtube-channel” page: Link
The Free Version of this plugin is mighty enough to fullfill a lot of your requests.

can i use png

https://kriesi.at/support/topic/ho-to-add-my-own-icon-instead-of-the-entypo-fontello-icons/#post-1343446

Without more details, or links to the page to which the problem refers, I can expect you to be able to transfer enough to adapt it to your specific case.
I think that the descriptions are precise enough; if they are read.

The one thing you had to know is that enfolds nomenklatur for those social links is always:
av-social-link-xyz
the xyz is the name of the social media and that will be at your list point as class – e.g: av-social-link-twitter; av-social-link-facebook; av-social-link-linkedin … etc.

This refers to the easy slider?

see here a result for socket ( not the footer links – those are shariff links to social media ) social links and custom instagram icon:
https://webers-testseite.de/#socket

#top #wrap_all #socket .social_bookmarks a {
 display: block;
}
#top #wrap_all #socket .av-social-link-instagram a:before {
 content:"";
 display:block;
 width:15px;
 height:15px;
 left: 50%;
 top: 50%;
 background:url('/wp-content/uploads/custom-instagram.png') no-repeat center center;
 background-size:contain;
 position: relative;
 transform: translate(-50%,-50%);
}
#top #wrap_all #socket .av-social-link-instagram:hover a {
 background-color: purple
}

Where do you want to place the shortcode?
Is it always the same place? E.g. always in single posts each time before the content? etc.

There are some filters (e.g.: avf_template_builder_content) or some hooks you can use to insert shortcodes via do_shortcode.
So if you could be a bit more specific about what you want to achieve, there might be a solution.

You have seen that new typography tab on enfold (child) – general styling:
and it is for all pages/posts a setting.
(click to enlarge)

a lot of alb elements with headings do have a similar input field on styling tab f.e. heading alb element:

do you have allready a custum post type registered in your theme ?
Or is it a CPT by a plugin?

You can include those CPTs to be supported by ALB _ see: Docu
f.e. if your CPT name is event:

function avf_alb_supported_post_types_mod( array $supported_post_types ) {
  $supported_post_types[] = 'event';
  return $supported_post_types;
}
add_filter('avf_alb_supported_post_types', 'avf_alb_supported_post_types_mod', 10, 1);

function avf_metabox_layout_post_types_mod( array $supported_post_types ) {
  $supported_post_types[] = 'event';
  return $supported_post_types;
}
add_filter('avf_metabox_layout_post_types', 'avf_metabox_layout_post_types_mod', 10, 1);

A notice :
so i am the supporter of the child theme files. Existing Child-Theme files reminds me that there was a customisation.
If i change some code inside those files – in this case i not only change inside the new code – but also try to include as accurate comments as possible.
Most of the code here has some comments on top of the first lines anyway – there I place another one that gives me a hint what it is about.
e.g: * Comment from Guenni007: related-posts here not by tags but by category – see line 60 and 80
and now f.e. on that lin 60:

$tags = get_the_category($this_id); // changed - orig: wp_get_post_tags($this_id);

When such adjustments are made, I always recommend staying cleanly in the child theme. Since I’m not sure it would be enough to have only the js file in the child theme shortcodes folder, I would take the rest of the files with it and relink the loading of the child theme css and js files respectively in the child theme php file.
And now we probably come to the crux of the matter. The older files might no longer match with the other parent elements.
However, one is not exempt from making these adjustments over and over again with updated files, whether one has applied these changes in the parent element or in the child theme files.
Using older child elements in the child theme can work well, but it doesn’t have to.
I would advise against it, especially for major updates.

You see that just in this case an adjustment is available by means of icongrid.css and icongrid_old.css. There I would assume that some within the php file has also changed.
In conclusion, I can say that I can not detect any problems with the element. Neither for desktop nor for mobile devices.

if you have a link to your site in private content area – i do not see – because i’m participant too.
But as a container like others you can set in the css code above a background-color.
if you only want to have that icon placed in your content – you don’t need the font-icon. You can place like this your svg itself. Then you can even have multicolor icons in front.
_________
See here an example test page ( with a custom font of mine – you had to change it to your font-family) : https://webers-testseite.de/#footer

and code a bit different:

#footer .widgettitle {
  padding-left: 40px;
  position: relative;
}

#footer .widgettitle::before {
  position: absolute !important;
  width: 30px !important;
  height: 30px !important;
  top: -2px;
  left: 0;
  content: "\e844";
  font-family: "fontellico";
  font-weight: 400 !important;
  font-size: 1.2em;
  line-height: 35px;
  background-color: #f5c61b;
  color: blue;
  text-align: center;
}

did you have a child-theme avia-snippet-sticky-header.js
and value calculation like here: https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/#post-1186874

But please Rikard – do check why that filter does not work in that manner.
my used filter is only mentioned as apply_filters_deprecated f.e. in class-avia-masonry.php and

have you checked if enfold does not do that if you put in that enfold options page of Google Analytics Tracking Code
______________
there is a hook directly after the opening body tag: ava_after_body_opening_tag

you can use it like this:

add_action('ava_after_body_opening_tag', function() {
  echo '<div class="custom"></div>';
});

only if there is an advanced layer slider on that page – this will come first.
can you post here the code you had to insert ( replace your IDs if there are some inside with dummies )

maybe better – insert it to a copy of header.php directly and place that edited header.php in your child-theme folder.

BUT – if you had to be GDPR ( DSGVO ) compliant – this methods must be adjusted.

• This reply was modified 3 years, 11 months ago by Guenni007.

i use all three files – the php file is only necessary because we had to load the child-theme css and js file.
in the css parent file there are some settings to be !important. This is not possible to overwrite from external ( quick css ) css.

So i would change Mikes Code a little.
And to have that not on all horizontal galleries – i would give a custom-class to the ALB Element f.e.: subline-gallery

function horizontal_gallery_subline(){
?>
<script>
(function($){
	$('.av-horizontal-gallery.subline-gallery').css("padding-bottom" , "30px" );
	$('.av-horizontal-gallery.subline-gallery .av-horizontal-gallery-link').css("bottom" , "50px");
	$('.av-horizontal-gallery.subline-gallery .avia-slideshow-arrows a').css("top" , "40%");

	$('.av-horizontal-gallery.subline-gallery .av-horizontal-gallery-img').each(function(){
	    var imgTitle = $(this).attr('title');
	    var imgAlt = $(this).attr('alt');
	    $(this).after('<span class="title-under-image">' + imgTitle + '</span><span class="alt-under-image">' + imgAlt + '</span>').css({"margin": "-20px 0"});
	    $(this).css({
	        "padding-bottom"    : "20px",
	        "background-color"  : "transparent"
	    });
	    $('.title-under-image').css({
	        "display"       : "block",
	        "text-align"    : "center",
	        "color"         : "#000",
	        "font-weight"   : "bold"
	    });
	    $('.alt-under-image').css({
	        "display":"block",
	        "text-align": "center",
	        "color": "#444"
	    });
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'horizontal_gallery_subline'); 

test-page: https://webers-testseite.de/horizontal-gallery/