I’ve figured it out!
Like the original post, I’m working with Calendar module. I wanted to understand why we could write, say symbol: “cloud” instead of having to declare the full “fas fa-fw fa-cloud” to invoke the symbol.
I went into /modules/default/calendar/calendar.js and noticed the following section of code:
const symbols = this.symbolsForEvent(event);
symbols.forEach((s, index) => {
const symbol = document.createElement("span");
symbol.className = "fas fa-fw fa-" + s;
if (index > 0) {
symbol.style.paddingLeft = "5px";
}
symbolWrapper.appendChild(symbol);
});
eventWrapper.appendChild(symbolWrapper);
} else if (this.config.timeFormat === "dateheaders") {
const blankCell = document.createElement("td");
blankCell.innerHTML = " ";
eventWrapper.appendChild(blankCell);
}
calendar.js is hardcoding the fas (solid) font family in, not allowing us to invoke a family like fab (brands). setting the line:
symbol.className = "fas fa-fw fa-" + s;
to just:
symbol.className = s;
forces us to redeclare every symbol in config.js from “cloud” to “fas fa-fw fa-cloud”, but we can now access all available FA icons.
And so, I get my leaf :)
Screen Shot 2022-04-28 at 17.37.44