Social Media Icons with textdecoration:underline

Thanks Yigit,
it is very tricky. I have already tried a lot. However, I have inserted the code, but it does not work.
Can it be that this line collides to other entries in the Quick CSS?
This is also the Quick CSS:

.header_color .phone-info span a{color: #45546e;text-decoration: underline;}
#menu-item-3568{border-right-width: 1px;border-color:#45546E;}
.special-heading-inner-border {display: none;}
.phone-info span {font-family: open sans;}
.sub_menu {font-family: open sans;}
.main_menu {font-family: open sans;}
div .widget_nav_menu {font-family: open sans;}
#header_main {background-color: #FFFFFF;}
#header_main_alternate {background-color: #FFFFFF;}
.main_color a, .main_color .widget_first, .main_color b a, .main_color strong a, .main_color #js_sort_items a:hover, .main_color #js_sort_items a.active_sort, .main_color .av-sort-by-term a.active_sort, .main_color .taglist a.activeFilter, .main_color #commentform .required#top .main_color .av-no-color.av-icon-style-border a.av-icon-char {text-decoration: underline;}
.main_color a.av-icon-char, .main_color b a.av-icon-char, .main_color strong a.av-icon-char {text-decoration: none !important;}
.widget_nav_menu .nested_nav a {text-decoration: none;}
.ls-l {font-family: open sans;}
#top .main_color .av-no-color.av-icon-style-border a.av-icon-char {text-decoration: none!important;}

Greetings. Ulrich

Hi!
Thank you again. But I do not understand it. It does not.
I´ve inserted the code. In the live environment (https://www.herzberg-legal.com/fr/presentation/cv-references/) it does not work. Therefore, I have copied the change in the production environment. Here it works (URL in the next private reply).

Where is the difference? The current code in the Quick CSS by both versions (Live and staging):

 .header_color .phone-info span a{color: #45546e;text-decoration: underline;}
#menu-item-3568{border-right-width: 1px;border-color:#45546E;}
.special-heading-inner-border {display: none;}
.phone-info span {font-family: open sans;}
.sub_menu {font-family: open sans;}
.main_menu {font-family: open sans;}
div .widget_nav_menu {font-family: open sans;}
#header_main {background-color: #FFFFFF;}
#header_main_alternate {background-color: #FFFFFF;}
.main_color a, .main_color .widget_first, .main_color b a, .main_color strong a, .main_color #js_sort_items a:hover, .main_color #js_sort_items a.active_sort, .main_color .av-sort-by-term a.active_sort, .main_color .taglist a.activeFilter, .main_color #commentform .required, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char {text-decoration: underline;}
.widget_nav_menu .nested_nav a {text-decoration: none;}
.ls-l {font-family: open sans;}
/* WP lightbox fix for visual builder */
#TB_overlay {z-index: 99999998 !important;}
#TB_window {z-index: 99999999 !important;}
.av_font_icon.av-icon-style-border .av-icon-char, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char {text-decoration: none !important;}

I have tried so many versions of CSS selectors until now. I can not find a solution. You perhaps?

Greetings. Ulrich