Integrate SVG into the dropdown menu without duplicating the SVG element

I have an SVG of a right arrow:

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>

I want to incorporate this arrow into dropdown items without repeating the SVG element.

Here is my attempt:

.arrow_forward::after{
  content:  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>');

}

<li><a href="history.php" class="dropdown-item arrow_forward"><span class="arrow_forward"></span>History</a></li>

However, it is not displaying as expected.

htmlcss

Answer №1

Adding SVG to HTML can be done in a different way for better results. Here is an example of how you could do it:

    <li>
      <a href="history.php" class="dropdown-item arrow_forward"
        ><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
          <path d="/" fill="none" />
          <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" />
        </svg>
        History</a
      >
    </li>

Check out the source: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

Answer №2

There are certain characters that require encoding when included in a URL.

.arrow_forward::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z'/%3E%3C/svg%3E");
}
<ul>
  <li><a href="history.php" class="dropdown-item arrow_forward"><span class="arrow_forward"></span>History</a></li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The symbol '★' represents the '★' content in CSS

Here is the CSS code I am using: .rating:not(:checked) > label:before { content: '★'; } However, when it is displayed on the screen, instead of seeing a ★, I see â˜. It's strange because if I use Firebug and manually change the ...

css

Having trouble getting the hover effect to change the colors of CSS borders

I am experiencing difficulty in changing the background color of the 'About' button to yellow and the border color to blue when it is hovered over. Currently, only a small rectangle around the text changes to yellow on hover and I cannot figure o ...

htmlcss

Button with CSS Sprite

These Sprite buttons are making me lose my mind. I'm so close to getting them to work, but not quite there yet. I've been playing around with this really simple sprite image: If you want to see the jsfiddle project, it's available here, bu ...

htmlcsscss-sprites

Unable to load circles on page refresh with amCharts Maps

I am experiencing an issue with the functionality of my amCharts maps. Whenever I refresh the page, the circles that are supposed to be displayed disappear. However, when I zoom in, the circles reappear. This problem has me puzzled, and I'm not sure ...

javascripthtmljsonamcharts

Print out two forms separately using HTML5

I'm currently tackling a project that condenses all content onto one convenient page, housing two forms. Despite my efforts, I have yet to find a successful solution. My goal is to print the Sales person form first, followed by the Customers section. ...

javascripthtml

Images in CSS not copied to the output directory when using Webpack

Using Webpack to bundle various javascript and css files on a website includes bundling bootstrap.css and chosen.css as part of the bundles. To achieve this, there is a main.js file serving as an entry point for importing all necessary files. The process i ...

javascriptcsswebpack

Encountering an error message stating, "Unable to assign value to 'onclick' property"

Currently, I am at a beginner level in Javascript. While working on some exercises, I encountered an issue with the 'onclick' function as mentioned above. Despite going through other queries in this forum, I have not found a solution that works ...

javascripthtml

Wait for the canvas to fully load before locating the base64 data in HTML5

Wait until the full canvas is loaded before finding the base64 of that canvas, rather than relying on a fixed time interval. function make_base(bg_img, width, height) { return new Promise(function(resolve, reject) { base_image = new Image(); base_imag ...

javascripthtmlhtml5-canvas

Is it possible for individuals on the local network to view the webpage?

Recently, I developed a login page in HTML that prompts users for their username and password. The information is then sent to ABC.php, and upon successful authentication, they are redirected to another website. To make this work, I set up a xampp server. ...

phphtmlwebserver

Rearrange the li elements within multiple ul lists using JavaScript

Is there a way to reorder multiple ul-lists on my website using JavaScript? An example of the lists may be as follows: $(document).ready(function() { var ul = $('ul.filelist'); for (let u = 0; u < ul.length; u++) { const element = ul[ ...

javascripthtmljquery

What are the reasons for the failure of an image upload when checked with PHP's is_uploaded_file function?

My html form allows users to upload images, but I'm encountering an issue where the uploaded image fails the "is_uploaded_file" check for some unknown reason. I'm puzzled as to why the upload is failing the is_uploaded_file check. Any ideas? He ...

phphtmlformsupload

Utilizing the Masonry jQuery plugin for optimizing empty spaces

Recently, I came across the Masonry plugin and I'm considering using it in a project. One question that intrigues me is whether there is a way to detect empty spaces that occasionally show up in the layout when divs are positioned. Being able to ident ...

javascriptjqueryhtmlcssjquery-masonry

"Clicking on one item in the Bootstrap submenu doesn't close the other items,

I have this Javascript code snippet that deals with expanding and collapsing submenu items: <script type="text/javascript> jQuery(function(){ jQuery(".dropdown-menu > li > a.trigger").on("click",function(e){ var current ...

javascriptjqueryhtmlcsstwitter-bootstrap

Modifying the color of a specific div using jQuery

I am attempting to develop a function that changes the background color of a div when a user clicks on it and then clicks on a button. The value needs to be saved as a variable, but I'm having trouble getting it to work because it keeps saying that th ...

javascriptjqueryhtml

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

Query: I need to incorporate a scroll event in the given html code that triggers when the div is scrolled. However, I am facing issues with implementing a scroll event that works when the elements are being scrolled. <ng-mult ...

javascripthtmlangular

Tips for displaying diverse content in a DIV container when users click on various sections of an image

Apologies for the unclear title, but I'm struggling to explain my technical goal using jargon. The basic concept is this: there will be an image on the webpage, and when a user clicks on a specific area of the image, relevant information will appear ...

javascriptjqueryhtml

Utilize jQuery to create a login form within a div when triggered by clicking on

I have implemented a jQuery script for login functionality that displays a new div in the center of the page while fading out the rest of the content. It is functioning correctly when I use an anchor tag with the class='login-window' and select i ...

jqueryhtmlcssajax

Left align the CSS menu text next to the menu image

Currently, I have a basic CSS menu that includes background images aligned to the left. My goal is to have the text float to the left of each image as well. <div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "vie ...

htmlcssmenucss-floatmenubar

What is the proper way to insert a line break within a string in HTML code?

Trying to simplify my code, I've turned to using Nunjucks to pass a group of strings to a function that will then display them. This is what it looks like: {% macro DisplayStrings(strings) %} {% for item in strings %} <div>{{ item.strin ...

javascripthtmlnunjucks

What steps can I take to ensure that my collapsible menu is both dynamic and easily accessible

I have integrated an app with the footable plugin to enable responsive tables. This feature transforms table columns into a collapsible menu that dynamically appears as a new row when a user expands it by clicking a button, and disappears upon collapse. I ...

htmlaccessibility