example5: FA 5.6.3 w/ v4-shims
authorTomas Zeman <tzeman@volny.cz>
Tue, 15 Jan 2019 15:59:25 +0100
changeset 19 34d3cc40552c
parent 18 9ae93aad4b14
child 20 529418651908
example5: FA 5.6.3 w/ v4-shims
example/src/main/scala/example/Example5.scala
example5.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example/src/main/scala/example/Example5.scala	Tue Jan 15 15:59:25 2019 +0100
@@ -0,0 +1,56 @@
+package example
+
+import fontawesome.jsdom.FA._
+import org.scalajs.dom
+import scalatags.JsDom.all._
+
+import scala.scalajs.js.annotation.{JSExport, JSExportTopLevel}
+
+@JSExportTopLevel("Example5")
+object Example5 {
+
+  @JSExport
+  def main(): Unit = {
+    val el = dom.document.getElementById("main")
+    el.innerHTML = ""
+    el.appendChild(div(cls:="pure-u-1", margin:="1em",
+      h1("Font awesome demo..."),
+      h2("Larger icons"),
+      div(cls:="pure-g",
+        div(cls:="pure-u-1-5", faCameraRetro.lg, "fa-lg"),
+        div(cls:="pure-u-1-5", faCameraRetro.x2, "fa-2x"),
+        div(cls:="pure-u-1-5", faCameraRetro.x3, "fa-3x"),
+        div(cls:="pure-u-1-5", faCameraRetro.x4, "fa-4x"),
+        div(cls:="pure-u-1-5", faCameraRetro.x5, "fa-5x")
+      ),
+      h2("Fixed width icons (default)"),
+      div(cls:="pure-u-1", faHome, "Home"),
+      div(cls:="pure-u-1", faBook, "Library"),
+      div(cls:="pure-u-1", faPencil, "Applications"),
+      div(cls:="pure-u-1", faCog, "Settings"),
+      h2("No fixed width icons"),
+      div(cls:="pure-u-1",
+        faWifi.noFw, faWikipediaW.noFw, faWon.noFw, faWordpress.noFw,
+        faXing.noFw, faYahoo.noFw, faYelp.noFw, faYen.noFw,
+        faYoast.noFw, faYoutube.noFw),
+      h2("List icons"),
+      ul(cls:="fa-ul",
+        li(faCheckSquare.li, "List icons"),
+        li(faCheckSquare.li, "can be used"),
+        li(faSpinner.li.spin, "as bullets"),
+        li(faSquare.li, "in lists")
+      ),
+      h2("Bordered & Pulled Icons"),
+      div(cls:="pure-u-1-4",
+        faQuoteLeft.x3.pullLeft.border,
+        s"""...tomorrow we will run faster, stretch out our arms farther...
+             And then one fine morning - So we beat on, boats against the
+              current, borne back ceaselessly into the past."""),
+      h2("Animated Icons "),
+      div(cls:="pure-u-1",
+        faSpinner.x3.spin, faCircleONotch.x3.spin, faRefresh.x3.spin,
+        faCog.x3.spin, faSpinner.x3.pulse
+      )
+    ).render)
+  }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example5.html	Tue Jan 15 15:59:25 2019 +0100
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>FA tags example</title>
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/v4-shims.css" crossorigin="anonymous">
+<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+<div id="main">Please run sbt fastOptJS to build the demo. Then reload this page.</div>
+<script type="text/javascript" src="example/target/scala-2.12/example-fastopt.js"></script>
+<script>
+Example5.main();
+</script>
+</body>
+
+</html>