examples |
No edit summary |
||
| Line 53: | Line 53: | ||
=== CSS-only icons === | |||
from https://doc.wikimedia.org/codex/latest/using-codex/developing.html#css-only-icons | |||
This: | |||
<pre> | |||
<html> | <html> | ||
<!-- Standalone icon. --> | <!-- Standalone icon. --> | ||
| Line 61: | Line 67: | ||
Delete | Delete | ||
</button> | </button> | ||
</html> | |||
</pre> | |||
produces: | |||
<html> | |||
<!-- Standalone icon. --> | |||
<span class="my-icon-class--map-pin"></span> | |||
<button class="cdx-button cdx-button--action-destructive"> | |||
<!-- Icon inside a button. --> | |||
<span class="my-icon-class--trash"></span> | |||
Delete | |||
</button> | |||
</html> | |||
However, this example is not working. | |||
<html> | |||
<style> | |||
@import "mediawiki.skin.variables.less"; | |||
.cdx-demo-css-icon { | |||
&--code { | |||
.cdx-mixin-css-icon( @cdx-icon-code ); | |||
} | |||
&--map-pin { | |||
.cdx-mixin-css-icon( @cdx-icon-map-pin ); | |||
} | |||
} | |||
</style> | |||
</html> | |||
<html> | |||
<p> | |||
<span class="cdx-demo-css-icon--code"></span> | |||
Code | |||
</p> | |||
<p> | |||
<span class="cdx-demo-css-icon--map-pin"></span> | |||
Map pin | |||
</p> | |||
</html> | </html> | ||
Latest revision as of 11:50, 21 November 2025
Something with a link to Foo to test MediaWiki:Common.less mix-ins from Codex https://doc.wikimedia.org/codex/latest/components/mixins/link.html
{
"name": "icons.json",
"callback": "MediaWiki\\ResourceLoader\\CodexModule::getIcons",
"callbackParam": [
// List the icons your module needs here, e.g.:
"cdxIconArrowNext",
"cdxIconBold",
"cdxIconTrash"
]
}
cdxIconLogoCC cdxIconLogoCodex cdxIconLogoMediaWiki cdxIconLogoMetaWiki cdxIconLogoWikibooks cdxIconLogoWikidata cdxIconLogoWikifunctions cdxIconLogoWikimedia cdxIconLogoWikimediaCommons cdxIconLogoWikimediaDiscovery cdxIconLogoWikinews cdxIconLogoWikipedia cdxIconLogoWikiquote cdxIconLogoWikisource cdxIconLogoWikispecies cdxIconLogoWikiversity
CSS-only icons[edit]
from https://doc.wikimedia.org/codex/latest/using-codex/developing.html#css-only-icons
This:
<html> <!-- Standalone icon. --> <span class="my-icon-class--map-pin"></span> <button class="cdx-button cdx-button--action-destructive"> <!-- Icon inside a button. --> <span class="my-icon-class--trash"></span> Delete </button> </html>
produces:
However, this example is not working.
Code
Map pin
