Responsive Layout mit Flexbox

[Gustav]

Hallo

ich möchte gern eine selfhtml-Design-Vorlage an meine Bedürfnisse anpassen und komme in der Navigationszeile an meine Grenzen. Sie sieht so aus:

Sollte aber so aussehen:

HTML

<nav>
  <ul>
    <li><a aria-current="page">Home</a></li>
    <li><a href="./Kat1.html">Kat 1</a></li>
    <li><a href="./Kat2.html">Kat 2</a></li>
    <li><a href="./Kat3.html">Kat 3</a></li>
    <li><a href="./de/">de</a></li>
  </ul>
</nav>

CSS

nav ul {
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  background-color: transparent;
  color: black;
  text-decoration: none;
  display: inline-block;
  width: 95%;
  margin: .5em 0;
  padding: .5em 1em;
  border: 1px solid gray;
  border-radius: .5em;
}

Es dürften wohl zwei Punkte anzupassen sein:

1. Statt des 'Home'-Textes soll eine home.svg Grafik eingebunden werden.
2. Die Menu-Punkte 'Home' und 'de' sollen bei horizontaler Navigationsleisten-Darstellung in der Breite kleiner ausfallen als die Übrigen.

Ich habe bei beiden Punkten schon viel ausprobiert. Hat jemand einen Rat, wie ich weiter komme?

Schöne Grüße, Gustav