From 8832b57b3f8c2bf9ba5ee80d2746dc8854dd0532 Mon Sep 17 00:00:00 2001 From: redonkulus Date: Tue, 4 Jan 2022 13:22:20 -0800 Subject: [PATCH] fix: add button icons fixes #938 --- site/docusaurus.config.js | 6 ++++++ site/src/pages/buttons/index.js | 26 +++++++++++++------------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js index 39c96ac..07d5e69 100644 --- a/site/docusaurus.config.js +++ b/site/docusaurus.config.js @@ -24,6 +24,12 @@ module.exports = { ], ], projectName: 'pure-css.github.io', + scripts: [ + { + src: 'https://kit.fontawesome.com/f7f35653b1.js', + defer: true, + } + ], themes: ['@docusaurus/theme-classic'], customFields: { PURE_DOWNLOAD_SNIPPET, diff --git a/site/src/pages/buttons/index.js b/site/src/pages/buttons/index.js index 6e9cd36..c4cbc25 100644 --- a/site/src/pages/buttons/index.js +++ b/site/src/pages/buttons/index.js @@ -17,7 +17,7 @@ function Buttons() {

- To create a Pure Button, add the pure-button classname to any <a> or <button> element. + To create a Pure Button, add the pure-button classname to any <a> or <button> element.

@@ -28,8 +28,8 @@ function Buttons() {

- To mark a button as disabled, add the pure-button-disabled classname alongside pure-button. - Alternatively, add the "disabled" attribute directly to your button. + To mark a button as disabled, add the pure-button-disabled classname alongside pure-button. + Alternatively, add the "disabled" attribute directly to your button.

@@ -40,7 +40,7 @@ function Buttons() {

- To style a button so that it appears "pressed", add the pure-button-active classname alongside pure-button. + To style a button so that it appears "pressed", add the pure-button-active classname alongside pure-button.

@@ -51,7 +51,7 @@ function Buttons() {

- To indicate that a button represents a primary action, add the pure-button-primary classname alongside pure-button. + To indicate that a button represents a primary action, add the pure-button-primary classname alongside pure-button.

@@ -62,11 +62,11 @@ function Buttons() {

- Thanks to Pure's minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application. + Thanks to Pure's minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application.

- To customize button styles, you should group your custom CSS into a class such as button-foo, which you can then add to an element that already has the pure-button classname. Here are some examples. + To customize button styles, you should group your custom CSS into a class such as button-foo, which you can then add to an element that already has the pure-button classname. Here are some examples.

Colored buttons with rounded corners

@@ -131,32 +131,32 @@ function Buttons() {

Buttons with icons

- Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from Font Awesome. Put the Font Awesome CSS file on your page and use an <i> element within a pure-button element. + Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from Font Awesome. Put the Font Awesome CSS file on your page and use an <i> element within a pure-button element.

- Checkout + Checkout

- Group multiple buttons together on a single line. + Group multiple buttons together on a single line.