Как сделать иконку SVG с текстом в одну строку в блоке меню?

Question

[Cal_Lightman]

Здравствуйте. В навигационном меню Главная страница имеет свои стили.
А именно:
1. Задал class="menu_icon_1" для ссылки в li,
2. Использую иконку SVG (через CSS) для показа на ПК,
3. <span class="home"></span> саму иконку пишу в: class="home"
4. <i>Главная</i> - в тегах прописываю Главная, для показа на Мобильных (при адаптивном меню)

Соответственно до определенного разрешения пишу: dispay:none для Иконки, а свыше этого разрешения, наоборот, показываю и прячу сам Текст.

Но если я делаю видимым и Иконку и Текст - то они плывут и не встают в одну строку.
Как должен выглядеть код, чтобы Иконка и Текст были на одной строке по центру?

HTML:

<div class="menu_list">
	<ul>
		<li><a href="" class="menu_icon_1"><span class="home"></span><i>Главная</i></a></li>
		<li><a href="">Контакты</a></li>
	</ul>
</div>

CSS:

.menu_list{
	width:100%;
	position:relative;
	float:left;
	box-shadow:inset 0px 1px 0px 0px #eee,inset 0px -1px 0px 0px #eee;
	z-index:84;
}
.menu_list ul{
	right:50%;
	list-style:none;
	position:relative;
	float:right;
	clear:left;
	transition:.3s;
}
.menu_list>ul>li{
	left:50%;
	padding:0 10px;
	position:relative;
	float:left;
}
.menu_list>ul>li:first-child{
	padding:0 10px 0 0;
}
.menu_list>ul>li>a{
	color:#3d3d3d;
	padding:13px 5px;
	font-family:'Montserrat-bold',sans-serif;
	font-size:16px;
	line-height:1.5;
	text-transform:uppercase;
	display:block;
	position:relative;
	transition:.3s;
}

/*head-icon-home*/
.menu_list>ul>li>.menu_icon_1{
	padding:0 10px;
}
.menu_icon_1,
.menu_icon_2{
	width:100%;
	height:50px;
	display:block;
	position:relative;
}
.home{
	width:20px;
	height:20px;
	top:15px;
	display:inline-block;
	position:relative;
}
.home::before{
	background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBmaWxsPSIjM2QzZDNkIiBkPSJNMjgwLjM3IDE0OC4yNkw5NiAzMDAuMTFWNDY0YTE2IDE2IDAgMCAwIDE2IDE2bDExMi4wNi0uMjlhMTYgMTYgMCAwIDAgMTUuOTItMTZWMzY4YTE2IDE2IDAgMCAxIDE2LTE2aDY0YTE2IDE2IDAgMCAxIDE2IDE2djk1LjY0YTE2IDE2IDAgMCAwIDE2IDE2LjA1TDQ2NCA0ODBhMTYgMTYgMCAwIDAgMTYtMTZWMzAwTDI5NS42NyAxNDguMjZhMTIuMTkgMTIuMTkgMCAwIDAtMTUuMyAwek01NzEuNiAyNTEuNDdMNDg4IDE4Mi41NlY0NC4wNWExMiAxMiAwIDAgMC0xMi0xMmgtNTZhMTIgMTIgMCAwIDAtMTIgMTJ2NzIuNjFMMzE4LjQ3IDQzYTQ4IDQ4IDAgMCAwLTYxIDBMNC4zNCAyNTEuNDdhMTIgMTIgMCAwIDAtMS42IDE2LjlsMjUuNSAzMUExMiAxMiAwIDAgMCA0NS4xNSAzMDFsMjM1LjIyLTE5My43NGExMi4xOSAxMi4xOSAwIDAgMSAxNS4zIDBMNTMwLjkgMzAxYTEyIDEyIDAgMCAwIDE2LjktMS42bDI1LjUtMzFhMTIgMTIgMCAwIDAtMS43LTE2LjkzeiI+PC9wYXRoPjwvc3ZnPg==') no-repeat;
	width:20px;
	height:20px;
	left:0;
	content:'';
	position:absolute;
}
.menu_icon_1 i{
	font-style:normal;
}

Answer 1

[Игорь Рахимов]

Зачем так усложнять dom-дерево?
Достаточно:
< div class="menu_list" >
< ul >
< li >< a href="" class="home">Главная< /li >
< li >< a href="">Контакты< /a >< /li >
< /ul >
< /div >

.menu_list .home{
...
background:url('data:image/svg+xml;ba....') left center no-repeat;
...
}

Answer 2

[Elena Fire]

li {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}