Html Question posted in
Some basic documentation can be found here.

Html – custom font symbol for star, how to change in css

I have weird issue, I’m using custom font in my project, when I add the * in html code
it appears as a special symbol, I will provide picture for it symbol appearing instead of * 

   <label for="{{ field.id_for_label }}">
            {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label>

the class asteriskField must render it as *, currently I have made it to not appear,

.asteriskField {
    display: none;
}

/* style.css */
@font-face {
    font-family: 'AlJazeera'; /*a name to be used later*/
    font-display: swap;
    src: url('./fonts/Al-Jazeera-Arabic-Regular.ttf'); /*URL to font*/
}

So what I should do so the star symbol render as usual ?

I have tried contents: "*" , but it doesn’t appear as normal star

Tags:

2

Answers


  1. 0

    You can use font-family: none; to use the default font on the asterisk

    The result should look like this

    enter image description here

    <p class="asteriskField">*</p>
<p>*</p>

    @font-face {
  font-family: "AlJazeera";
  src: url("./Al-Jazeera-Arabic-Regular.ttf");
}

html,
body {
  font-family: "AlJazeera", Arial, sans-serif;
}
.asteriskField{
  font-family: none;
}
    Login or Signup to reply.
  2. 0

    I took the liberty to turn my comment into an answer.

    The asterisk gets rendered with the font you’ve set for the page, which is Al Jazeera. You can revert this decision by setting the font family to initial:

    html,
body {
  font-family: "AlJazeera", Arial, sans-serif;
}

.asteriskField {
  font-family: initial;
}
    <p>
  This text has the Al Jazeera font, but not the asterisk<span class="asteriskField">*</span>
</p>

    The difference from this answer is that font-family: none is not a valid value for font-family. It may work, but it is not standardized.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search