Unit vector sign does not work(shows) properly

[CoderKawsar]

\hat{i} \widehat{i} \overline{i} \tilde{i}

All of these unit vector signs do not show vector signs correctly. All of these signs break in with the letter tittle(.)

[fast-reflexes]

Looks ok to me ...

  <div style={{ textAlign: "center" }}>
    <MathJax>
      {"$$\\hat{i}$$"}
      {"$$\\widehat{i}$$"}
      {"$$\\overline{i}$$"}
      {"$$\\tilde{i}$$"}
      {"\\(\\hat{i}\\)"}
      {"\\(\\widehat{i}\\)"}
      {"\\(\\overline{i}\\)"}
      {"\\(\\tilde{i}\\)"}
    </MathJax>
  </div>

Could you specify what's wrong and give me both a picture of what it looks like and provide the code?

[fast-reflexes]

@CoderKawsar please provide further input or I can't help you out.

[CoderKawsar]

I'm sorry, man. It's working perfectly now. The font was causing the problem. Changing to a math font resolves the problem.