{"id":22514673,"url":"https://github.com/cityssm/fa5-power-transforms-css","last_synced_at":"2025-07-03T19:34:35.449Z","repository":{"id":57102014,"uuid":"151280893","full_name":"cityssm/fa5-power-transforms-css","owner":"cityssm","description":"Font Awesome 5 \"Power Transform\" like functionality using straight CSS","archived":false,"fork":false,"pushed_at":"2020-09-04T19:03:24.000Z","size":45,"stargazers_count":8,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-23T01:37:12.806Z","etag":null,"topics":["css","data-fa-mask","data-fa-transform","fa-layers","fa5","font-awesome-5","fontawesome","power-transforms","webfonts"],"latest_commit_sha":null,"homepage":"https://cityssm.github.io/fa5-power-transforms-css/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cityssm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-02T15:48:19.000Z","updated_at":"2024-03-12T17:43:23.000Z","dependencies_parsed_at":"2022-08-20T22:10:07.188Z","dependency_job_id":null,"html_url":"https://github.com/cityssm/fa5-power-transforms-css","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/cityssm/fa5-power-transforms-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cityssm%2Ffa5-power-transforms-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cityssm%2Ffa5-power-transforms-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cityssm%2Ffa5-power-transforms-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cityssm%2Ffa5-power-transforms-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cityssm","download_url":"https://codeload.github.com/cityssm/fa5-power-transforms-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cityssm%2Ffa5-power-transforms-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261850788,"owners_count":23219366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","data-fa-mask","data-fa-transform","fa-layers","fa5","font-awesome-5","fontawesome","power-transforms","webfonts"],"created_at":"2024-12-07T03:20:11.861Z","updated_at":"2025-07-03T19:34:35.391Z","avatar_url":"https://github.com/cityssm.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fa5-power-transforms-css\nFont Awesome 5 \"Power Transform\" like functionality using straight CSS\n\n\n## What is this?\n\nFont Awesome 5 provides some really neat functionality they call Power Transforms.\nPower Transforms allow you to shrink icons, rotate icons, and layer icons in endless ways.\n\nThe problem is, Power Transforms are only available to users of the SVG + JS version of Font Awesome.\nAt this time, I prefer the web fonts version for performance reasons.\n\nThis project attempts to recreate some of the key Power Transform features in straight CSS.\n\n\n## Which `data-fa-transform` options are recreated?\n\n`rotate-n`\n- Rotates the icon by a given number of degrees.\n- Supports whole numbers only, multiples of 5, -355 to 355.\n\n`flip-h`, `flip-h`\n- Flips an icon horizontally, vertically, or both.\n\n`shrink-n`, `grow-n`\n- Reduces the size, or increases the size.\n- Supports whole numbers from 1 to 16.\n\n### `.fa-layers` only\n\nThe Web Fonts version does offer [stacking](https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons) using the `.fa-stack` class, but the `.fa-layers` class is far more powerful.\n\nUnlike the Font Awesome 5 implementation, the following options are only available to icons inside a `.fa-layers` container.\n\n`up-n`, `down-n`, `left-n`, `right-n`\n- Supports whole numbers from 1 to 8.\n\n\n## Background Color Magic\n\n*Note that the following attributes may require updated the CSS for your template.*\n\n`data-fa-mask=\"\"`\n- Slightly different than the Font Awesome 5 specification.\n- The existence of this attribute will **attempt** to set the icon's color to that of the background.\n\n`data-fa-glow=\"\"`\n- Adds an outline to the icon for some really fancy layering.\n- Defaults to white, with some Bootstrap 3 background color options.\n- Include a value of `black`, `danger`, `warning`, `info`, or `success` to force a specific glow color.\n- Defaults to an outline width of `4px`.\n  - Include a value of `1px`, `2px`, or `3px` for a thinner width (or no width in IE).\n  - Include a value from `5px` to `9px` for a thicker width.  (Not supported by IE.)\n\n\n## I want to see it in action!\n\n[See the examples](https://cityssm.github.io/fa5-power-transforms-css/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcityssm%2Ffa5-power-transforms-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcityssm%2Ffa5-power-transforms-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcityssm%2Ffa5-power-transforms-css/lists"}