Я хотел бы добавить изображение перед тегом.
<a href="index.html">Apple</a>
Так, например, добавьте логотип Apple раньше, но в той же строке текста Apple.
Спасибо, Эндрю
Используйте display:flex; - warp div для установки a и img в одной строке Вы можете установить align-items: center; в центр текста Узнайте о flex: https://www.w3schools.com/cssref/css3_pr_flex.asp
display:flex;
warp div
a
img
align-items: center;
flex
.warp{ display:flex; align-items: center; } img{ height:150px; width:150px; }
<div class="warp"> <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/> <a href="index.html">Apple</a> </div>
, если вы хотите динамически вставить изображение, посмотрите на этот пример: чтобы проверить:
http://grpd.es/apple/apple.html
http://grpd.es/apple/tomato.html
пример кода:
<html> <BODY> <a href="index.html">Apple</a> <a href="peach.html">Peach</a> <a href="tomato.html">Tomato</a> <button onclick="insertar()">imagen</button> <script language="javascript"> function insertar(){ imagen=document.createElement('img'); imagen.src="apple.png"; imagen.id="img1"; document.body.appendChild(imagen); var el = document.getElementsByTagName("a"); for(i=0;i<el.length;i++){ if(el[i].innerHTML=='Apple'){ var iimagen = document.body.insertBefore(imagen,el[i]); } } } </script> </BODY> </html>
Используйте тег изображения для вставки логотипа.Правильно отрегулируйте ширину и высоту логотипа
Попробуйте:
<img src="url" width="30", height="30"> <a href="index.html">Apple</a>
Здесь укажите соответствующий URL-адрес для логотипа.