Transparent Background

The thing is, you’ve applied the background to the header. So you’re never going to achieve what you want.

.titleclass {
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    background-image: url(../../img/demo_header_01.jpg);
}

Can you set that image as the page’s main background instead?

Your theme uses a font for the icons, the font is called ‘Font Awesome’. The icons are controlled with CSS, using the ‘content’ property.

To override the Dribble icon…

If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then do the following:

1. Install this Custom CSS Manager plugin http://ww.wp.xz.cn/plugins/custom-css-manager-plugin
2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
3. (put this code in)

   .icon-dribbble:before {
       content: "[character-reference]";
   }

4. Save

Alternatively use your Child Theme style.css file to hold your CSS modifications

If you look in the ‘Font Awesome’ cheatsheet in the link below, you will see the character references of the icons. For example, Dribble has the character reference of (please ignore the spaces, I’ve added that to get past this forum’s parser):

[ & # x f 1 7 d ; ]

You need to ignore these characters:

[&#x;]

The only bit you want is this bit:

f17d

In the CSS ‘content’ property you want to put those characters inside the speech marks, but you need to prepend a backslash to those characters:

\f17d

To result in the code:

.icon-dribbble:before {
    content: "\f17d";
}

You can change that.

https://fortawesome.github.io/Font-Awesome/cheatsheet/