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 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 sida
Några ex.
fa-lg fa-2x fa-3x fa-4x fa-5x
- List icons
- can be used
- as bullets
- in lists
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, er uppgift är att formatera checkbox och radio button med lämpliga FontAwesome ikoner.
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.
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-size: 14px; }
d. Lägg in en lämplig ikon för en checkbox som inte är markerade.
input[type="checkbox"]:after { font-family: 'FontAwesome'; content: '\f096'; color: #999999; font-size: 14px; }
e. Lägg in den ikon man vill ska visas när man har klickat i en checkbox.
input[type="checkbox"]:checked:after { font-family: 'FontAwesome'; content: '\f046'; 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 ex.)
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style_radio.css">
<link rel="stylesheet" type="text/css" href="style_checkbox.css">
<link rel="stylesheet" type="text/css" href="style_fa.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Super Quizen</title>
</head>
<body>
<div id="page">
<h2>Quiz ex</h2>
<form method="post">
<div class="quiz-info">
<label>Skriv in ditt namn</label>
<input placeholder="Ange ditt namn" type="text" name="name">
</div>
<fieldset>
<legend>Checkbox</legend>
<div class="quiz-item">
<label class="question">Vad heter sveriges största sjö?</label>
<div>
<input type="checkbox" name="cb1[1]" value="a1">
<label class="option">Vänern</label>
</div>
<div>
<input type="checkbox" name="cb1[2]" value="a2">
<label class="option">Vättern</label>
</div>
<div>
<input type="checkbox" name="cb1[3]" value="a3">
<label class="option">Storsjön</label>
</div>
<div>
<input type="checkbox" name="cb1[4]" value="a4">
<label class="option">Hornavan</label>
</div>
</div>
<div class="quiz-item">
<label class="question">Vad heter sveriges djupaste sjö?</label>
<div>
<input type="checkbox" name="cb2[1]" value="a1">
<label class="option">Vänern</label>
</div>
<div>
<input type="checkbox" name="cb2[2]" value="a2">
<label class="option">Vättern</label>
</div>
<div>
<input type="checkbox" name="cb2[3]" value="a3">
<label class="option">Storsjön</label>
</div>
<div>
<input type="checkbox" name="cb2[4]" value="a4">
<label class="option">Hornavan</label>
</div>
</div>
<div class="quiz-item">
<label class="question">Vad heter sveriges bästa hockeylag?</label>
<div>
<input type="checkbox" name="cb3[1]" value="a1">
<label class="option">Färjestad</label>
</div>
<div>
<input type="checkbox" name="cb3[2]" value="a2">
<label class="option">Modo</label>
</div>
<div>
<input type="checkbox" name="cb3[3]" value="a3">
<label class="option">Frölunda</label>
</div>
</div>
<div class="quiz-item">
<label class="question">Vad heter sveriges bästa hundras?</label>
<div>
<input type="checkbox" name="cb4[1]" value="a1">
<label class="option">Spets</label>
</div>
<div>
<input type="checkbox" name="cb4[2]" value="a2">
<label class="option">Tax</label>
</div>
<div>
<input type="checkbox" name="cb4[3]" value="a3">
<label class="option">Bodercollie</label>
</div>
<div>
<input type="checkbox" name="cb4[4]" value="a4">
<label class="option">Boxer</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Radio</legend>
<div class="quiz-item">
<label class="question">Vad heter sveriges största sjö?</label>
<div>
<input type="radio" name="r1" value="a1">
<label class="option">Vänern</label>
</div>
<div>
<input type="radio" name="r1" value="a2">
<label class="option">Vättern</label>
</div>
<div>
<input type="radio" name="r1" value="a3">
<label class="option">Storsjön</label>
</div>
<div>
<input type="radio" name="r1" value="a4">
<label class="option">Hornavan</label>
</div>
</div>
<div class="quiz-item">
<label class="question">Vad heter sveriges djupaste sjö?</label>
<div>
<input type="radio" name="r2" value="a1">
<label class="option">Vänern</label>
</div>
<div>
<input type="radio" name="r2" value="a2">
<label class="option">Vättern</label>
</div>
<div>
<input type="radio" name="r2" value="a3">
<label class="option">Storsjön</label>
</div>
<div>
<input type="radio" name="r2" value="a4">
<label class="option">Hornavan</label>
</div>
</div>
<div class="quiz-item">
<label class="question">Vad heter sveriges bästa hockeylag?</label>
<div>
<input type="radio" name="r3" value="a1">
<label class="option">Färjestad</label>
</div>
<div>
<input type="radio" name="r3" value="a2">
<label class="option">Modo</label>
</div>
<div>
<input type="radio" name="r3" value="a3">
<label class="option">Frölunda</label>
</div>
</div>
<div class="quiz-item">
<label class="question">Vad heter sveriges bästa hundras?</label>
<div>
<input type="radio" name="r4" value="a1">
<label class="option">Spets</label>
</div>
<div>
<input type="radio" name="r4" value="a2">
<label class="option">Tax</label>
</div>
<div>
<input type="radio" name="r4" value="a3">
<label class="option">Bodercollie</label>
</div>
<div>
<input type="radio" name="r4" value="a4">
<label class="option">Boxer</label>
</div>
</div>
</fieldset>
<input type="submit" name="submit" value="Svara">
</form>
</div>
</body>
</html>