Change posts and views into fa-icons

MJ

We use the dutch language and the words posts and views are very long in our language (Onderwerpen and Berichten) because of this the text is overlapping.

View post on imgur.com

Is it possible to use font awesome icons instead of text?
And if it's possible how can I change it?

MJ

bump ^^
....

MJ

bump 2

can sombody help me please?

julian

Sure, this looks like an issue with widget-essentials...

I don't know if there's a way to detect when text overruns their containers, and I'm assuming you don't want the word truncated with ellipses.

I'd just use client-side javascript, and replace those words on the fly...

$(window).on('action:widgets.loaded', function () {
  // do something here...
});

MJ

@julian said in Change posts and views into fa-icons:

$(window).on('action:widgets.loaded', function () {
// do something here...
});

must I do this in CSS ?

Mega

@MJ CSS? Nah. Just execute some JS
For example:

$(window).on('action:widgets.loaded', function () {
	$('li[component="categories/category"]')
	.add('li[component="category/topic"]')
	.find('.stats > small')
	.each(function (i, el) {
		var
			$small = $(el),
			text = $small.text(),
			$icon,
			iconClass

		if (text === 'Topics')
			iconClass = 'fa-group'
		else if (text === 'Posts')
			iconClass = 'fa-group'
		else if (text === 'Views')
			iconClass = 'fa-group'
		else
			return

		$icon = $('<i class="fa fa-fw ' + iconClass + '"></i>')
		$small.replaceWith($icon)
	})
});

P.S. Actually, the best way to change something in a theme - is to fork the theme and make whatever changes you want in your own repository. But you'll have to keep track of any new changes from the original theme repository, resolve merge conflicts, etc. This way is a hard way. The example I've provided above is the easy one.

MJ

@Mega where do I put the code?

MJ

@Mega how do I use the code and where must I put it?

julian

You can do this in the custom HTML section... wrap it in <script></script>

An HTML widget might also work.