Icon Sets
Built-in icon sets
The Hugo Cosmos bundles just a small set of built-in icons to avoid loading too much resources that don’t need.
Custom icon sets
The only supported source for custom icons are SVG sprites. Some icon frameworks provides ready to use sprites e.g. FontAwesome1. If the framework don’t provide sprites, you can create your own from raw SVG icons. There are a lot of tools available to create sprites, please choose one that fits your need. One solution could be svgsprit.es.
Regardless of which tool (or existing sprite) you choose, there are a few requirements that must be met:
- The sprite must be a valid SVG file.
- You have to ensure to hide the sprite. Apply the predefined class
svg-sprite
orhidden
to the root element of your sprite or add a small piece of inline CSS e.g.style="display: none;"
. - Save the sprite to the folder
assets/sprites
right beside yourcontent
folder.
The result of a valid minimal SVG sprite file could look like this:
|
|
Example:
Choose your sprite to use and copy it to your projects root directory into assets/sprites
, right beside your content
folder:
|
|
That’s it! The theme will auto-load all available SVG sprites provided in the assets folder. An example would be douban
. There is also a shortcode available.
FontAwesome icon sets
To be supported.
alipay
Author Houmin Wei
Publish January 23, 2023
LastMod July 11, 2023 (8d68658)
License 本作品采用 CC BY-NC-ND 4.0 许可协议进行许可,转载时请注明原文链接
如果你在浏览博客的过程中发现了任何问题,欢迎在对应文章下评论。如果你有其他事情想要咨询,可以通过邮件联系我。