Forum d'entraide PHPFrance

Bonjour,

Je suis entrain de refaire un petit site, je souhaite tout mettre en interne et de ne pas dépendre de lien externe.
La mise en page fonctionne avec ce lien ci :

<link rel="stylesheet" href="https://kit-free.fontawesome.com/releas ... ee.min.css" media="all">

J'ai récupérer le contenu que j'ai mis dans un fichier css et que j’ appel comme ceci mis dans le head :

<link rel="stylesheet" href="/../../Public/Utiles/CSS/all.min.css">

Lorsque j’accède a au fichier via le web le fichier s'affiche, mais l'apparence de mon site ne change pas.

Via la console mon fichier est bien appelé.
Le fichier sert a utiliser l’icône fontawesome l’œil et l’œil barré pour les mot de passe.

Merci par avance pour votre aide
@+ Filou

Il te faut également télécharger les polices ttf, qui servent à afficher les images, les ttf sont pas des lettres mais des images, si tu n'a pas la police = pas d'images.

Tu remarquera dans le .css dans lien vers les .tff, par exemple la police "Font Awesome 5 Brands".

La j'ai telechargé le kit webfonts que j'ai dans le dossier css.
Mais toujours pareil.
la a la place de l'oeil j'ai un symbole, cela fonctionne mais pas avec l'icone souhaité
@+ Filou

voila mon html :

Code : Tout sélectionner

                <div class="col-8 input-group">
                    <div class="input-group-text iconesConnexionInscription">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
                            <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
                        </svg>
                    </div>
                    <input type="password"
                        name="mdpInscription"
                        placeholder="Mot de passe*"
                        autocomplete="off"
                        class="form-control"
                        minlength="6"
                        maxlength="20"
                        id="pass"
                        pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+-=<>?/]{6,}$"
                        oncopy="return false"
                        onpaste="return false"
                        oninput="hiddenscript()"
                        required="">

                    <div class="d-flex align-items-center">
                        <i class="fas fa-eye small text-center" id="eye" onclick="Showfunction()"></i>
                    </div>

                </div>

voila mon js :

Code : Tout sélectionner


function hiddenscript() {
var eye = document.getElementById("eye");
if (document.getElementById("pass").value.trim().length == 0) {
    eye.style.display = "none";
} else {
    eye.style.display = "block";
}
}

function Showfunction() {
var eye = document.getElementById("eye");
var eye2 = document.getElementById("eye2");
var pass = document.getElementById("pass");
var value = document.getElementById('pass').value;

if (value.length > 0) {
    eye.style.display = "block";
}
if (pass.type === "password") {
    pass.type = "text";
    eye.classList.toggle('fa-eye');
    eye.classList.toggle('fa-eye-slash');
} else {
    pass.type = "password";
    eye.classList.toggle('fa-eye');
    eye.classList.toggle('fa-eye-slash');
}
}
}

un css :

Code : Tout sélectionner

/* .fas {
    display: block;
    float: right;
    margin-right: 15px;
    margin-top: -45px;
    position: relative;
    color: #555;
    font-size: 23px;
    cursor: pointer;
    z-index: 3;
    display: none;
} */

#eye0 {
    display: none;
}

#eye {
    display: none;
}

#eye2 {
    display: none;
}

#eye0 {
    /* position: relative; */
    /* margin-left: -30px;
    margin-top: -28px; */
    color: #87CEFA ;
    font-size: 23px;
    cursor: pointer;
    /* z-index: 3; */
}

#eye {
    /* position: relative; */
    /* margin-left: -30px;
    margin-top: -28px; */
    color: #87CEFA ;
    font-size: 23px;
    cursor: pointer;
    /* z-index: 3; */
}

#eye2 {
    /* position: relative; */
    /* margin-left: -30px;
    margin-top: -28px; */
    color: #87CEFA ;
    font-size: 23px;
    cursor: pointer;
    /* z-index: 3; */
}

.small{
    /* background-color: white; */
    border-radius: 6px;
    column-width: 40px;
}

et j'ai aussi l'autre css que j'ai récupéré.

quand je met le script css en lien cela fonctionne mais quand je met en local avec le fichier récupéré impossible .
@+Filou

Bonjour,

Tu peux télécharger la dernière version de fontawesome ici : https://fontawesome.com/download
Et suivre les instructions sur cette page pour héberger les css et webfonts dans ton site : https://fontawesome.com/v6/docs/web/set ... f/webfonts

Merci pour votre aide,
J'ai lié les fichiers comme dans l'exemple fait des tests, en vain.
Toujours une icône toute bizarre.
@+ Filou

Je suis un boulet en relisant j'ai pas vu que le dossier webfonts est a mettre au dessus et pas dans le même répertoire que le css.

Merci pour votre aide Ynx

@+ Filou

Forum d'entraide PHPFrance

[RESOLU] script css hors ligne

script css hors ligne

Re: script css hors ligne

Re: script css hors ligne

Re: script css hors ligne

Re: script css hors ligne

Re: script css hors ligne

Re: script css hors ligne