Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
Next revision Both sides next revision
font-awesome [2017-11-23 19:58]
Joakim Forsgren 		font-awesome [2017-11-23 20:03]
Joakim Forsgren
Line 1: Line 1:
 ====== Font Awesome + checkbox radio button ====== ====== Font Awesome + checkbox radio button ======
-Syftet med denna uppgift är att lära sig lite om hur man kan placera ut "icons" med hjälp av Font Awesome och hur man kan få kontroll på utseende av checkbox radio button.+Syftet med denna uppgift är att lära sig lite om hur man kan placera ut "icons" med hjälp av FontAwesome och hur man kan få kontroll på utseende av checkbox radio button.
  
 Ni får försöka läsa om hur man placerar ut ikoner med hjälp av Font Awesome på deras [[http://fontawesome.io/| sida]]  Ni får försöka läsa om hur man placerar ut ikoner med hjälp av Font Awesome på deras [[http://fontawesome.io/| sida]] 
Line 37: Line 37:
 1. Gör en sida med minst 5 olika ikoner med olika färger och olika storlekar. 1. Gör en sida med minst 5 olika ikoner med olika färger och olika storlekar.
  
-2. Längst ner på denna sida hittar ni lite HTML för en enkel frågesport, er uppgift är att formatera checkbox och radio button med lämplig Font Awesome ikoner.+2. Längst ner på denna sida hittar ni lite HTML för en enkel frågesport, er uppgift är att formatera checkbox och radio button med lämpliga FontAwesome ikoner.
  
-Hur ni kan gå tillväga.+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 webläsare.+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. b. Skapa en css fil style_checkbox.css och lägg den i samma katalog.
Line 75: Line 75:
 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å. 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å.
  
-3. Skapa en fil style_radio.css och fixa radio buttoms.+f. Skapa en fil style_radio.css och fixa radio buttoms.
  
-4. Skapa en fil style_fa.css och fixa in lämpliga ikoner, jobba med :before och :after+2. Skapa en fil style_fa.css och fixa in lämpliga ikoner, jobba med :before och :after
  
-5. Skapa en fil style.css och fixa övrig övriga saker på sidan. (Se {{::fa_checkbox_radio.png?linkonly|ex}}.)+3. Skapa en fil style.css och fixa övrig övriga saker på sidan. (Se {{::fa_checkbox_radio.png?linkonly|ex}}.)