39

How do I remove italic effect of <i> tag so I can do this:

<span>
    test<i>test</i>
</span>

I am filling some text in the <i> tag using jQuery innerHtml, so it comes in italic, but I don't want the italic effect.

Is there any way I can remove the italic effect using CSS?

I cant use a different tag. I can only use the <i> tag.

0

5 Answers 5

68

You just need to use this CSS code:

.no-italics {
    font-style: normal;   
}

HTML code:

<span>
   test
   <i class='no-italics'>test</i>
</span>
18

Use font-style:

i {
  font-style: normal;
}
9

You can do any formatting with CSS.

Like:

b {
    font-weight: normal;
}

will change bold text to normal.

Similarly,

i {
    font-style: normal;
}

will make <i> font style as normal (non-italic).

4

You can use the CSS style font-style: normal to get that effect. Then you can do your jQuery to put text in the tag:

$('i#replace').html('this text isn\'t italicized either . . . ');
i {
  font-style: normal;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span>text text <i id="replace">this is NOT italic</i> text text</span>

0

Use font-style to reset the italic style when the class is used.

i.no-italics {
    font-style: normal;   
}
<i class="no-italics">Olmstead v. L.C. and E.W</i>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.