use my self-made social icons and change their size

You should just be able to add the image HTML to a custom link:

<img src="URL TO YOUR ICON" alt="" />

Thank you so much!! You are the best, can't say different :D

You're very welcome :)

Hi,
One more question to this topic.When I hover over my FB-social icon it creates a white field around which is overlaying my other social icons, also the "link-field" is overlaying the link of the other social media icon, how can I reduce the "field size" of the icons so they are not interfering with each other?
http://www.amuddyroad.com

Best wishes,
Yannick

Give this CSS a try:

.main-navigation .main-nav li.facebook-icon a {
    background: transparent !important;
}

Thank you Tom!
This solves already the "white field" but when I click on the right side of the Insta icon it opens Facebook. There's still a "field" left. Now it's transparent but the Facebook link is still overlaying the Instagram link. Sorry, don't know how to name my problem better.. hope you understand me :D

Just updated the code above - can you give it a try? :)

Thank you Tom but the problem is still there. The Facebook link overlays the Instagram link.

Seems fixed on this side - try clearing your browser cache.

I cleared my browser cache but it's still there, the right half of the Instagram icon leads me to the Facebook link.

Ah, that's happening because of this CSS you have:

.facebook-icon {
    padding-top: 30px;
    margin-left: -30px;
}

.insta-icon {
    padding-top: 30px;
    margin-right: -30px;
}

Instead, try something like this:

.main-navigation .main-nav li.facebook-icon a,
.main-navigation .main-nav li.insta-icon a {
    padding: 0;
}

Perfect, Thank you!! :)

Now I adjusted everything in the way I like it

/*social-icons*/
.main-navigation .main-nav li.facebook-icon a {
    background: transparent !important;
    padding-right: 20px !important; /*Icon right side*/
}

.main-navigation .main-nav li.insta-icon a {
    background: transparent !important;
    padding-left: 40px !important; /*Icon left side*/
}

.main-navigation .main-nav li.facebook-icon a,
.main-navigation .main-nav li.insta-icon a {
    padding: 0;
    padding-top: 20px !important;
}

now the social media icons in the mobile menu are also "padded"

Awesome :)