Twitter X icon

Hello,
In the codes below, twitter works with the old icon. I ask you if we can edit the twitter icon to appear as “X”.

Another issue is that the codes below work very well.
But when I look through GSM, social media accounts are in the center. You can look at the attached photo, is it possible to adjust them so that GSM is on the right side?

—————————————————

@media only screen and (max-width: 990px) { .responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks {
display: block;
}
}

#top .social_bookmarks li {
width: 35px;
}

#top .social_bookmarks li a {
width: 30x;
line-height: 30px;
min-height: 30px;
font-size: 20px;
}
#top #wrap_all .social_bookmarks .social_bookmarks_facebook a{color:#fff; background-color:#37589b; }
#top #wrap_all .social_bookmarks .social_bookmarks_twitter a{color:#fff; background-color:#46d4fe; }

#top #wrap_all .social_bookmarks .social_bookmarks_youtube a{color:#fff; background-color:#ff0000; }
#top #wrap_all .social_bookmarks .social_bookmarks_linkedin a{color:#fff; background-color:#419cca; }
#top #wrap_all .social_bookmarks .social_bookmarks_instagram a{color:#fff; background-color:#f15e78; }

.responsive #top #wrap_all #header_meta .social_bookmarks li.social_bookmarks_facebook a{color:#fff; background-color:#37589b; }
.responsive #top #wrap_all #header_meta .social_bookmarks li.social_bookmarks_twitter a{color:#fff; background-color:#46d4fe; }
.responsive #top #wrap_all #header_meta .social_bookmarks li.social_bookmarks_linkedin a{color:#fff; background-color:#419cca; }
.responsive #top #wrap_all #header_meta .social_bookmarks li.social_bookmarks_youtube a{color:#fff; background-color:#ff0000; }
.responsive #top #wrap_all #header_meta .social_bookmarks li.social_bookmarks_instagram a{color:#fff; background-color:#f15e78; }