The list items are showing incorrect characters when displayed in UTF-8 format

Question

The list items are showing incorrect characters when displayed in UTF-8 format

I'm attempting to create a style that will display an arrow in place of the li element.

$("html > head").append("<style id=styles>div#panel { position: absolute; border-radius: 3px; font-family:'Arial Black'; font-size:13px; }\n\r" +
     "ul li:before { content: \"\00BB \8680\"; }"
    + "</style>\n\r");

Instead of seeing an arrow, I'm only getting a jumble of characters displayed. The page charset is utf-8.

I've reviewed these resources: http://www.w3schools.com/charsets/ref_utf_arrows.asp

Any suggestions on how to resolve this issue?

css

Answer 1

Answer №1

Here's a simple trick. Just update content: \"\00BB to content: '\\00BB'.

Example in Action:

$(function() {
  $("html > head").append("<style>div#panel{ position: absolute; border-radius: 3px; font-family:'Arial Black'; font-size:13px; } ul { list-style: none; } ul li:before{ content: '\\00BB'; margin-right: 10px; } </style>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

Answer 2

Here's a simple trick. Just update content: \"\00BB to content: '\\00BB'.

Example in Action:

$(function() {
  $("html > head").append("<style>div#panel{ position: absolute; border-radius: 3px; font-family:'Arial Black'; font-size:13px; } ul { list-style: none; } ul li:before{ content: '\\00BB'; margin-right: 10px; } </style>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

The list items are showing incorrect characters when displayed in UTF-8 format

Answer №1

Similar questions

Aligning to the left using a .css file in RMarkdown has some limitations

Adjust the size of the text editor in eXtplorer's EditArea module

Dynamic content in a CSS animation that rolls credits as they scroll

What methods can be used to ensure all widgets are aligned in a single line using html or css?

"The Issue with Dropdowns in Older Versions of Internet Explorer (IE8 and Below

Ways to customize the default font in themes by using locally stored fonts

Ways to widen the header to fit the entire page?

Remove the triangle shape from the div and reveal the background

JavaScript obtain scroll position of a child element

What are some effective ways to optimize my Javascript and CSS files for a smaller size?

The text in my image is positioned away from the top

Tips for Arranging HTML Elements Next to Each Other with CSS3

Customizing Background Color in React Bootstrap Table Based on Value

Adjusting the alignment of text towards the right side

What could be causing my backend to malfunction while the website is live?

Select all feature in checkbox is malfunctioning

calculation of progress bar advancement

The height of the href is not displaying correctly when the text-decoration is disabled and it is placed next to

Stop click event from firing on a disabled tree node within an angular custom directive template

The alignment of my text appears to be off