Differences
This shows you the differences between two versions of the page.
font-awesome [2017-11-24 09:11] Joakim Forsgren |
font-awesome [2022-07-18 13:20] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Font Awesome + checkbox radio button ====== | ||
- | Syftet med denna uppgift är att lära sig lite om hur man kan placera ut " | ||
- | Ni får försöka läsa om hur man placerar ut ikoner med hjälp av Font Awesome på deras [[http:// | ||
- | |||
- | Några ex. | ||
- | |||
- | < | ||
- | <link rel=" | ||
- | <link rel=" | ||
- | < | ||
- | .fa-camera-retro { | ||
- | color: #999; | ||
- | } | ||
- | </ | ||
- | <i class=" | ||
- | <i class=" | ||
- | <i class=" | ||
- | <i class=" | ||
- | <i class=" | ||
- | |||
- | <div class=" | ||
- | <a class=" | ||
- | <a class=" | ||
- | <a class=" | ||
- | <a class=" | ||
- | </ | ||
- | |||
- | <ul class=" | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | </ | ||
- | |||
- | 1. Gör en sida med minst 5 olika ikoner med olika färger och olika storlekar. Ni ska lägga minst två ovanför varandra (Stacked Icons). Detta gör ni i en fil ni kan kalla fa.html. | ||
- | |||
- | 2. Längst ner på denna sida hittar ni lite HTML för en enkel frågesport, | ||
- | |||
- | Punkterna a-f är en hjälp på hur ni kan gå tillväga för att lyckas med uppgift 2. | ||
- | |||
- | a. Skapa en ny tom fil, kopiera in HTML-koden nedan, spara och kolla hur det ser ut i en webbläsare. | ||
- | |||
- | b. Skapa en css fil style_checkbox.css och lägg den i samma katalog. | ||
- | |||
- | c. Ni ska ta bort hur de ser ut default i en webb-läsare. Lägg in följande CSS och kolla så att alla checkboxar försvinner. | ||
- | <code CSS> | ||
- | input[type=" | ||
- | -webkit-appearance: | ||
- | -moz-appearance: | ||
- | appearance: none; | ||
- | cursor: pointer; | ||
- | font-size: 14px; | ||
- | } | ||
- | </ | ||
- | |||
- | d. Lägg in en lämplig ikon för en checkbox som inte är markerade. | ||
- | <code CSS> | ||
- | input[type=" | ||
- | font-family: | ||
- | content: ' | ||
- | color: #999999; | ||
- | font-size: 14px; | ||
- | } | ||
- | </ | ||
- | |||
- | e. Lägg in den ikon man vill ska visas när man har klickat i en checkbox. | ||
- | <code CSS> | ||
- | input[type=" | ||
- | font-family: | ||
- | content: ' | ||
- | color: #b79407; | ||
- | font-size: 14px; | ||
- | } | ||
- | </ | ||
- | Nu har du bytt ut checkbox element som är mycket svåra att få att se ut som man vill till tecken som är lätta att byta storlek och färg på. | ||
- | |||
- | f. Skapa en fil style_radio.css och fixa radio buttoms. | ||
- | |||
- | 2. Skapa en fil style_fa.css och fixa in lämpliga ikoner, jobba med :before och :after | ||
- | |||
- | 3. Skapa en fil style.css och fixa övrig övriga saker på sidan. (Se {{:: | ||
- | |||
- | |||
- | <code HTML> | ||
- | < | ||
- | <html lang=" | ||
- | < | ||
- | <meta charset=" | ||
- | <link rel=" | ||
- | <link rel=" | ||
- | <link rel=" | ||
- | <link rel=" | ||
- | <link rel=" | ||
- | < | ||
- | </ | ||
- | < | ||
- | <div id=" | ||
- | < | ||
- | < | ||
- | <div class=" | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | <label class=" | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | < | ||
- | <label class=" | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | < | ||
- | <label class=" | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | < | ||
- | <label class=" | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | <label class=" | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | < | ||
- | <label class=" | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | < | ||
- | <label class=" | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | < | ||
- | <label class=" | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | <div> | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | <input type=" | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ |