:before does not work as it should

Asked

Viewed 311 times

1

I bought a CSS and am trying to apply on my site, the Cass I bought has a validation scheme in the form where it circles the form with a red line and puts an X inside the text box. I’ll put an image here to be easy to understand, this is the template I bought. inserir a descrição da imagem aqui

Now mine stays that way: inserir a descrição da imagem aqui

The difference of HTML is the inclusion of a ::before and a class (which I think q is the one that puts the before, but I’m not sure how it works, I’m learning)

The form component is in a , follows the example of the first component already with the validation of an active error:

<div class="form-group  has-error">
::before
<label class="sr-only" for="Nome">Nome</label>
                
<input class="input-validation-error form-control input-lg required text-box single-line" data-val="true" data-val-required="O campo Nome é obrigatório." id="name" name="Nome" placeholder="Name" type="text" value=""> <ul class="parsley-errors-list" id="parsley-id-1125"></ul>
                
                
</div>

O ::before is the "X" I want to put, it has the following css:

.contact-form .has-error:before {
    content: "\f00d";
    color: #d2322d;
}

Because in my project he has a square and in the purchased design is an X?

css asp.net-mvc-5
  • 1

    That sort of thing (content: "\f00d";) usually comes from source files. You’ve included all the fonts that came in the template in your project?

  • Make sure you are getting an error on the console. Also post your MVC Bundleconfig.

  • before is working correctly, the problem is the source. before adds content from your div.

1 answer

3


Font Awesome is installed wrong. As is ASP.NET MVC, use the appropriate Nuget package to use it.

Also check your file App_Start/BundleConfig.cs there is a CSS entry for Font Awesome CSS. I use it like this:

bundles.Add(new StyleBundle("~/BundledContent/css").Include(
                  "~/Content/bootstrap.css",
                  /* Aqui tem mais uma cacetada de coisas, mas vou pular pro que interessa */
                  "~/Content/font-awesome.css"));

Also check your web.config to allow some extensions in static mode. The ASP.NET MVC route usually misinterprets these references:

<configuration>
...
  <system.webServer>
  ...
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <remove fileExtension=".otf" />
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-woff2" />
      <mimeMap fileExtension=".json" mimeType="text/json" />
    </staticContent>
  ...
  </system.webServer>
...
</configuration>

Browser other questions tagged css asp.net-mvc-5

You are not signed in. Login or sign up in order to post.