Update fontawesome to 5.7.1 (#979)

Closes #953
r-lib · Mar 9, 2019 · d1d10cf · d1d10cf
1 parent 79db85c
commit d1d10cf
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 12 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -1,5 +1,9 @@
 # pkgdown (development version)
 
+* Updated fontawesome to 5.7.1. [fontawesome 5 deprecated the `fa` prefix style](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use),
+  so fontawesome users need to migrate their icons from `fa fa-home` to `fas fa-home`. Note
+  that brands now have a separate prefix (`fab fa-github`) (#953).
+
 * Optionally, opt of out of installation in `deploy_site_github()`
 
 * `\tabular{}` conversion better handles code (@mitchelloharawild, #978).

diff --git a/R/build.r b/R/build.r
@@ -153,13 +153,13 @@
 #'     - text: Title B1
 #'       href: articles/b1.html
 #'    twitter:
-#'      icon: fa-lg fa-twitter
+#'      icon: "fab fa-twitter fa-lg"
 #'      href: http://twitter.com/hadleywickham
 #' ```
 #'
 #' Components can contain sub-`menu`s with headings (indicated by missing
-#' `href`) and separators (indicated by a bunch of `-`). You can use `icon`s
-#' from fontawesome: see a full list <https://fontawesome.com/icons>.
+#' `href`) and separators (indicated by a bunch of `-`). You can also use `icon`s
+#' from [fontawesome](https://fontawesome.com/icons?d=gallery).
 #'
 #' This yaml would override the default "articles" component, eliminate
 #' the "home" component, and add a new "twitter" component. Unless you

diff --git a/R/navbar.R b/R/navbar.R
@@ -79,7 +79,7 @@ navbar_components <- function(pkg = ".") {
   menu$news <- navbar_news(pkg)
 
   if (!is.null(pkg$github_url)) {
-    menu$github <- menu_icon("github", pkg$github_url)
+    menu$github <- menu_icon("github", pkg$github_url, style = "fab")
   }
 
   print_yaml(menu)
@@ -99,8 +99,8 @@ menu_link <- function(text, href) {
 menu_links <- function(text, href) {
   purrr::map2(text, href, ~ list(text = .x, href = .y))
 }
-menu_icon <- function(icon, href) {
-  list(icon = paste0("fa-", icon, " fa-lg"), href = href)
+menu_icon <- function(icon, href, style = "fas") {
+  list(icon = paste0(style, " fa-", icon, " fa-lg"), href = href)
 }
 menu_text <- function(text) {
   list(text = text)

diff --git a/inst/assets/pkgdown.css b/inst/assets/pkgdown.css
@@ -234,3 +234,9 @@ mark {
 .html-widget {
   margin-bottom: 10px;
 }
+
+/* fontawesome ------------------------ */
+
+.fab {
+    font-family: "Font Awesome 5 Brands" !important;
+}
diff --git a/inst/templates/head.html b/inst/templates/head.html
@@ -25,7 +25,8 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
 
 <!-- Font Awesome icons -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/v4-shims.min.css" integrity="sha256-6qHlizsOWFskGlwVOKuns+D1nB6ssZrHQrNj1wGplHc=" crossorigin="anonymous" />
 
 <!-- clipboard.js -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script>

diff --git a/man/build_site.Rd b/man/build_site.Rd
diff --git a/vignettes/pkgdown.Rmd b/vignettes/pkgdown.Rmd
@@ -197,12 +197,12 @@ In this example, we gave the `div` a class of `"shiny-app-frame"` in order to le
 
 By default, the top navigation bar (the "navbar") will contain links to:
 
-* The home page, with a "home" icon (<i class="fa fa-home fa-lg"></i>).
+* The home page, with a "home" icon (<i class="fas fa-home fa-lg"></i>).
 * "Get Started", if you have an article with the same name as the package (e.g., `vignettes/pkgdown.Rmd`).
 * Reference
 * Articles (i.e., vignettes, if present).
 * News (if present).
-* A "github" icon (<i class="fa fa-github fa-lg"></i>) with a link to your your github repo (if listed in the `DESCRIPTION` url field).
+* A "github" icon (<i class="fab fa-github fa-lg"></i>) with a link to your your github repo (if listed in the `DESCRIPTION` url field).
 
 You can override these defaults to: