logo   Om Font Awesome




Font Awesome er et framework med flere hundrede x tekstbaserede ikoner indenfor en række emneområder. Ikonerne kan bl.a. anvendes responsivt i Bootstrap.


En del eksempler på anvendelse af FA kan ses her x.


For at kunne anvende FA skal de HTML-filer, hvorpå der skal indsættes ikoner, indeholde font-awesome frameworket eller have dette CDN-link:


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Når man har fundet det ønskede ikon, klikkes der på det. Et øjeblik efter vises den relevnte kode som et "i"-tag" i et andet skærmbillede.


Koden, der kan se sådan ud:

<i class="fa fa-camera-retro"></i>

kopieres og indsættes som tekst, der hvor ikonet ønskes vist .


CSS

Ikonerne kan tilpasses med css; bl.a:


Forgrundsfarve
<i class="fa fa-camera-retro" style="color: red;"></i>


Baggrundsfarve
<i class="fa fa-camera-retro" style="color: red; background: white;"></i>


Størrelse
<i class="fa fa-camera-retro" style="color: red; background: white; font-size: 24px;"></i>




<input type="..."


I "input types" kan "i"-tagget ikke indsættes. det er derfor nødvendigt at ty til andre metoder.



<type="submit"

I 'submit'-attributten kan man anvende ikonernes unicode-værdi, der kan findes her x.


<style>
.awe {
font-family: FontAwesome, verdana;
}
</style>

<form method='post' name="navn" action='#' >
<input class="awe" type="submit" name="not_editor" value="&#xf061; Send"/>
</form>


Selektoren skal også indeholde den font-family, der skal anvendes til knappens tekst.


Yderligere css-editering påvirker hele knappen.


<style>
.awe1 {
font-family: FontAwesome, verdana;
color: red;
}
</style>

<form method='post' name="navn" action='#' >
<input class="awe1" type="submit" name="not_editor" value="&#xf083; Send"/>
</form>



<input type="submit" ...

For alle værdibærende input typer gælder at man ikke kan placere FA-ikoner, unicoder eller andet uvedkommende inde i value-attributterne. Det må gøres udenfor. Tilknytning kan dog gøres på (mindst) 2 andre måder:


  • Label
    Det kan gøres simpelt med en label.
    <style>
    .awe0 {
    font-family: FontAwesome;
    }
    </style>

    <form method='post' name="navn" action='#' >
    <label class="awe0" for="mail"><i class="fa fa-envelope">/lt;/i></label>
    <input id="mail" type="text" placeholder="Email address" />
    </form>


  • Div box
    Med en div-boks og en passende mængde knofedt (noget kan muligvis undværes / genbruges) kan der etableres flotte FA-understøttede input-felter.
    <style>
    .icon-ph {
        display: inline-block;
        width: auto;
        height: auto;
        min-width: 16px;
        padding: 4px 5px;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        text-align: center;
        text-shadow: 0 1px 0 #ffffff;
        background-color: #eeeeee;
        position:absolute;
        left:3px;
        top:3px;
        bottom:3px;
        z-index:3;
        }
    .custom-text {
        padding:6px 6px 6px 30px ;
    }
    .input-container {
        position:relative;
        border:1px solid red;
    }
    </style>

    <form method='post' name="navn" action='#' >
    <div class='input-container'>
        <div class="icon-ph"><i class="fa fa-envelope"></i></div>
        <input class="custom-text" type="text" placeholder="Email address">
    </div>
    </form>




Button som "submit"


<button type="submit">
<i class="fa fa-envelope"></i> Send
</button>




FA med CSS


FA-ikoner kan også indsættes alene ved at benytte CSS x.


<style>
.element {
    position: relative;
}

/*replace the content value with the
corresponding value from the list below*/

.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

</style>


<p class="element">css</p>

css
x
x