Added the css selector to add icons after

GilbertoTomasone · Mar 9, 2020 · fa0ac40 · fa0ac40
1 parent f56619d
commit fa0ac40
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -34,14 +34,22 @@ $ npm install multifonts-loader
 <span class="[FONT_CLASS_PREFIX]-[FONT_FILE_NAME]"></span>
 
 <span class="[ICON_BASE_SELECTOR] [ICON_CLASS_PREFIX]-[SVG_FILE_NAME]"></span>
+
+<span class="[ICON_BASE_SELECTOR] [ICON_CLASS_PREFIX]-[SVG_FILE_NAME]-after"></span>
 ```
 
+`NOTE:` You can specify the position of the icon by appending the word `'-after'`
+to its default selector.
+By default the icon will be added `before`.
+
 *Example:*
 
 ```html
 <span class="font-Roboto-ThinItalic"></span>
 
 <span class="icon icon-arrow"></span>
+
+<span class="icon icon-arrow-after"></span>
 ```
 
 #### Options

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "multifonts-loader",
-  "version": "3.0.7",
+  "version": "3.1.7",
   "description": "A webpack loader to generate all your fontfaces and iconfonts in one go.",
   "main": "./index.js",
   "scripts": {

diff --git a/templates/css.hbs b/templates/css.hbs
@@ -14,8 +14,18 @@
 	vertical-align: top;
 }
 
+.{{baseSelector}}:after {
+	font-family: {{fontName}} !important;
+	font-style: normal;
+	font-weight: normal !important;
+	vertical-align: top;
+}
+
 {{#each codepoints}}
 .{{../classPrefix}}{{@key}}:before {
 	content: "\\{{this}}";
 }
+.{{../classPrefix}}{{@key}}-after:after {
+	content: "\\{{this}}";
+}
 {{/each}}