socicon

Social icons font is downloaded from http://www.socicon.com/download.php Based on v3.5.2 v2017.05

Reason behind creating this repo is that on NPM there was only one library with an outdated version 3.0.5 of the socicon. It had completely different character codes and that broke our frontend.

Generating rules for icons

Whenever socicon version is updated (e.g. new icons added, changed character codes, icon colors) navigate to Socicon home page. Then in the DevTools execute following code:

{
	let rules = '';

	$('.icons').each(function() {

		const $icon = $(this);
		const selector = '.' + $icon.find('.usage').text().match(/"(.*)"/)[1];
		const color = $icon.find('.color').text();
		const charCode = $icon.find('.unicode').text();

		rules += `${selector} { .socicon-colors(${color}); &:before { content: '${charCode}'; } }\n`;
	});


	console.log(rules);
	copy(rules);
	console.log('NOTE: Rules are Copied to Clipboard');
}

Then copy paste it to obb-socicon.less

In PhpStorm:

• Sort the lines with Edit > Sort Lines
• Align with Edit > String Manipulation > Align > Align to Columns > {. You will need to have the String Manipulation plugin installed.