How to add Text and background image next to text
Hello, everyone,
I have issue here, I need to create button, using <a> tag, and I need to add icon at the end of text, i cannot use font awesome icon, I should use only png file that too using css background image property.
I added output file how it should look like, I tried few options, but image is not displaying in the browser,
what I have tried:
HTML
<button type="button" class="button">
<span class="button-txt">Learn More</span>
<span class="button-icon"></span>
</button>
CSS:
button.button {
border: none;
background-color: #c19cec;
border-radius: 6px;
width: 79px;
height: 17.5px;
display: inline-flex;
margin-left: 40px;
}
.button-txt {
text-transform: uppercase;
color: #3e2b84;
font-family: 'ClanOT-News';
font-size: 7px;
line-height: 2.2;
}
.button-icon {
background-image: url(../images/angle_bracket.png);
background-color: #ac8cd5;
width: 20px;
height: 17px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
position: relative;
left: 7.5px;
bottom: 1px;
}
Guys, Please help me out....
Thanks in advance
10 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I cannot use <img>tag, should use background image only
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yes bro
tried, but not working bro
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I think I tried yesterday, I'll try bro
thanks 👍
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@Bhanubenak in case that doesn't work, your best bet is to make a codepen so that we can see all your code live and (not) working. You can replace the image with a reference to picsum, like https://picsum.photos/32 for a 32x32 image, or https://picsum.photos/320/200/ for a 320x200 photo
I think i got the solution, the png img file has large dimensions.
Let me resize the img try...
Thank you all for responding and helping
It really helped and i'll remember all the above points valid points, when i make mistake....👍😁
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View