Fontawesome Problem

Question

Fontawesome Problem

Cenk 1,036

Hi,

I changed this (bootstrap-5-login-form-using-neomorphism-89456141) and used it on my Blazor Server Login page. The problem is even though I downloaded fontawesome (as all.css and login.css is the CSS in the link) and added it to my project, the images are not visible.

Here is the Login.cshtml:

@page  
  
@using Microsoft.AspNetCore.Authorization  
@using Microsoft.AspNetCore.Mvc.TagHelpers  
@using IMS.WebApp.Shared  
@model LoginModel  
@attribute [AllowAnonymous]  
  
@{  
    Layout = "/Pages/Shared/_EmptyLayout.cshtml";  
}  
@{  
    ViewData["Title"] = "Log in";  
}  
  
<main class="form-signin">  
    <div class="wrapper">  
        <div class="logo">  
            <img src="~/css/images/logo.png" alt="">  
        </div>  
         
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>  
        <form id="account" method="post" class="p-3 mt-3">  
            <div class="form-field d-flex align-items-center">  
                <span class="far fa-user"></span>                  
                <input asp-for="Input.Email" class="form-control" autocomplete="Username" aria-required="true"/>  
            </div>  
            <div class="form-field d-flex align-items-center">  
                <span class="fas fa-key"></span>  
                <input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true"/>  
            </div>  
            <button class="btn mt-3">Login</button>  
        </form>  
        <div class="text-center fs-6">  
            <p>© 2022</p>  
        </div>  
          
    </div>  
</main>  
  
  
@section Scripts {  
    <partial name="_ValidationScriptsPartial" />  
}

Here is layout:

@using Microsoft.AspNetCore.Hosting  
@using Microsoft.AspNetCore.Mvc.ViewEngines  
@inject IWebHostEnvironment Environment  
@inject ICompositeViewEngine Engine  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <title>@ViewData["Title"] - Vorlance</title>  
  
    <environment include="Development,Production">  
        <link rel="stylesheet" href="~/Identity/lib/bootstrap/dist/css/bootstrap.css" />  
        @*<link rel="stylesheet" href="~/Identity/css/site.css" />*@  
        <link href="~/css/signin.css" rel="stylesheet" />  
        <link href="~/css/login.css" rel="stylesheet" />  
        <link href="~/css/all.css" rel="stylesheet" />  
          
    </environment>  
    <environment exclude="Development">  
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"  
              integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"  
              asp-fallback-href="~/Identity/lib/bootstrap/dist/css/bootstrap.min.css"  
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />  
        <link rel="stylesheet" href="~/Identity/css/site.css" asp-append-version="true" />  
    </environment>  
</head>  
<body>  
      
    <div class="container">  
        <partial name="_CookieConsentPartial" optional />  
        <main role="main" class="pb-1">  
            @RenderBody()  
        </main>  
    </div>  
      
  
    <environment include="Development,Production">  
        <script src="~/Identity/lib/jquery/dist/jquery.js"></script>  
        <script src="~/Identity/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>  
        <script src="~/Identity/js/site.js" asp-append-version="true"></script>  
          
    </environment>  
    <environment exclude="Development">  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"  
                asp-fallback-src="~/Identity/lib/jquery/dist/jquery.min.js"  
                asp-fallback-test="window.jQuery"  
                crossorigin="anonymous"  
                integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2">  
        </script>  
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"  
                asp-fallback-src="~/Identity/lib/bootstrap/dist/js/bootstrap.bundle.min.js"  
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"  
                crossorigin="anonymous"  
                integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj">  
        </script>  
        <script src="~/Identity/js/site.js" asp-append-version="true"></script>  
    </environment>  
  
    @await RenderSectionAsync("Scripts", required: false)  
</body>  
</html>

Accepted answer

2 additional answers

Your answer

Answer 1

Hi @Cenk ,

Is there a way to not show a blue frame around the email?

To this issue, if you are using F12 developer tools to check the Elements and CSS style, you can see the issue related the .form-control class, when focus on this control, it will set the box-shadow style, so you can see this blue box.

To solve this issue, you can set the box-shadow to none in the Login.cshtml page or in the custom CSS file.

<style>  
    .form-control:focus {  
        box-shadow: none !important;  
    }  
</style>

After that, when focus on the input element, the box shadow disappears:

When I press login, I want to display validation messages above the email.

About this issue, you can add a <span> to display the validation message, and move it outside the div container, refer to the following code:

Then, the output like this:

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

Cenk 1,036

Adding kit from fontawesome to my project did the trick :)

<script src="https://kit.fontawesome.com/abc.js" crossorigin="anonymous"></script>

Answer 3

Cenk 1,036

I need some help here.

Is there a way to not show a blue frame around the email?

When I press login, I want to display validation messages above the email.

Share via

Fontawesome Problem

2 additional answers

Your answer