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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Bhanubenak
BhanubenakOP2y ago
I cannot use <img>tag, should use background image only
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Bhanubenak
BhanubenakOP2y ago
yes bro tried, but not working bro
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Bhanubenak
BhanubenakOP2y ago
I think I tried yesterday, I'll try bro thanks 👍
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Jochem
Jochem2y ago
@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
Bhanubenak
BhanubenakOP2y ago
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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server