MyBB Community Forums

Full Version: How to do this icons?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
Hello,
I am asking about how to add this icons or small photos before Posts, Thread, Joined Etc...
Have a look at this photo please:
[Image: p_1007t1m5t1.png]
Before Posts Number, Threads Number, Joined Date, Thanks Number, Country, There is icon before it in user post info, So I am asking about how to do something like this?
I will be thankful in all cases and Thanks a lot.
I think they are made with Font Awesome: https://fontawesome.com/how-to-use/on-th...s-with-css
(2018-10-05, 09:52 AM)linguist Wrote: [ -> ]I think they are made with Font Awesome: https://fontawesome.com/how-to-use/on-th...s-with-css

Sorry, can you explain how to do it?
And Thanks!
Edit your header_include template and add this after {$stylesheets} :
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" crossorigin="anonymous">

Then, edit postbit_author_user:
	<i class="far fa-comments"></i>&nbsp;{$lang->postbit_posts} {$post['postnum']}<br />
	<i class="far fa-newspaper"></i>&nbsp;{$lang->postbit_threads} {$post['threadnum']}<br />
	<i class="far fa-calendar"></i>&nbsp;{$lang->postbit_joined} {$post['userregdate']}
	<i class="far fa-thumbs-up"></i>&nbsp;{$post['replink']}{$post['profilefield']}{$post['warninglevel']}
Use the fontawesome search engine to find the icons you want to use
(2018-10-05, 10:42 AM)Crazycat Wrote: [ -> ]Edit your header_include template and add this after {$stylesheets} :
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" crossorigin="anonymous">

Then, edit postbit_author_user:
	<i class="far fa-comments"></i>&nbsp;{$lang->postbit_posts} {$post['postnum']}<br />
	<i class="far fa-newspaper"></i>&nbsp;{$lang->postbit_threads} {$post['threadnum']}<br />
	<i class="far fa-calendar"></i>&nbsp;{$lang->postbit_joined} {$post['userregdate']}
	<i class="far fa-thumbs-up"></i>&nbsp;{$post['replink']}{$post['profilefield']}{$post['warninglevel']}
Use the fontawesome search engine to find the icons you want to use

Hello bro,
It worked but there is small edit,
i have in postbit_author_user template those
	{$lang->postbit_posts} {$post['postnum']}<br />
	{$lang->postbit_threads} {$post['threadnum']}<br />
	%%TYL_NUMTHANKEDLIKED%%<br />
	{$lang->postbit_joined} {$post['userregdate']}
	{$post['replink']}{$post['profilefield']}
Can you make for it please Smile
and that's a photo of what i have
[Image: p_1008c7r4w1.png]
And thanks a lot man you are the best
(2018-10-04, 04:19 PM)iKsu Wrote: [ -> ]Hello,
I am asking about how to add this icons or small photos before Posts, Thread, Joined Etc...
Have a look at this photo please:
[Image: p_1007t1m5t1.png]
Before Posts Number, Threads Number, Joined Date, Thanks Number, Country, There is icon before it in user post info, So I am asking about how to do something like this?
I will be thankful in all cases and Thanks a lot.

Add to headerinclude:


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">


Add to global.css:

i.postcount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.threadcount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.joindate {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.repcount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.profield {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.warncount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}


Replace postbit_author_user with:

<i class="fas fa-comments postcount"></i>&nbsp;{$lang->postbit_posts} {$post['postnum']}<br />
<i class="fas fa-newspaper threadcount"></i>&nbsp;{$lang->postbit_threads} {$post['threadnum']}<br />
<i class="fas fa-calendar joindate"></i>&nbsp;{$lang->postbit_joined} {$post['userregdate']}
{$post['replink']}{$post['profilefield']}{$post['warninglevel']}


Replace postbit_reputation with:

<br />
<i class="fas fa-thumbs-up repcount"></i>&nbsp;{$lang->postbit_reputation} {$post['userreputation']}

Replace postbit_profilefield with:

<br />
<i class="fas fa-chalkboard-teacher profield"></i>&nbsp;{$post['fieldname']}: {$post['fieldvalue']}

Replace postbit_warninglevel with:

<br />    
 <i class="fas fa-exclamation-triangle warncount"></i>&nbsp;{$lang->postbit_warning_level} <a href="{$warning_link}">{$warning_level}</a>


That actually covers everything that needs to be covered in default as the previous instructions provided did not touch on the entirety and only solved part of it.
Now, as far as the country flag and likes ...., I would have to see how the specific plugins are included in the templates or else you can edit them based on what instructions have now been shown. Best of luck!
Try to understand what I did:
I'va added <i class="far fa-XXXXXXX"></i>&nbsp; before each line.
This tag display the icon fa-XXXXXXX from fontawesome.

Have a look at https://fontawesome.com/icons?d=gallery&...lar&m=free (example) to see what I used.

And you'll have to look the template of your thanks/like plugin to add icons on its lines.

Try by yourself, I can't (and didn't want) do it for you. It's better to learn you how to do.
(2018-10-05, 12:40 PM)Crazycat Wrote: [ -> ]Try to understand what I did:
I'va added <i class="far fa-XXXXXXX"></i>&nbsp; before each line.
This tag display the icon fa-XXXXXXX from fontawesome.

Have a look at https://fontawesome.com/icons?d=gallery&...lar&m=free (example) to see what I used.

And you'll have to look the template of your thanks/like plugin to add icons on its lines.

Try by yourself, I can't (and didn't want) do it for you. It's better to learn you how to do.

Hey,
i got you how to make it but i am facing problem
Look please at this photo
[Image: p_1008enyx51.png]
I been able to make Thanks Received Icon as you explained but there is no line for this Thanks Given and Country
So how can i get Country + Thanks Given to add it in
i class="far fa-XXXXXXX"></i>&nbsp;  Please help me in this i learnt how to do just want the lines of it..
And Thanks!

(2018-10-05, 12:34 PM)vintagedaddyo Wrote: [ -> ]
(2018-10-04, 04:19 PM)iKsu Wrote: [ -> ]Hello,
I am asking about how to add this icons or small photos before Posts, Thread, Joined Etc...
Have a look at this photo please:
[Image: p_1007t1m5t1.png]
Before Posts Number, Threads Number, Joined Date, Thanks Number, Country, There is icon before it in user post info, So I am asking about how to do something like this?
I will be thankful in all cases and Thanks a lot.

Add to headerinclude:


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">


Add to global.css:

i.postcount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.threadcount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.joindate {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.repcount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.profield {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
i.warncount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}


Replace postbit_author_user with:

<i class="fas fa-comments postcount"></i>&nbsp;{$lang->postbit_posts} {$post['postnum']}<br />
<i class="fas fa-newspaper threadcount"></i>&nbsp;{$lang->postbit_threads} {$post['threadnum']}<br />
<i class="fas fa-calendar joindate"></i>&nbsp;{$lang->postbit_joined} {$post['userregdate']}
{$post['replink']}{$post['profilefield']}{$post['warninglevel']}


Replace postbit_reputation with:

<br />
<i class="fas fa-thumbs-up repcount"></i>&nbsp;{$lang->postbit_reputation} {$post['userreputation']}

Replace postbit_profilefield with:

<br />
<i class="fas fa-chalkboard-teacher profield"></i>&nbsp;{$post['fieldname']}: {$post['fieldvalue']}

Replace postbit_warninglevel with:

<br />    
 <i class="fas fa-exclamation-triangle warncount"></i>&nbsp;{$lang->postbit_warning_level} <a href="{$warning_link}">{$warning_level}</a>
That actually covers everything that needs to be covered in default as the previous instructions provided did not touch on the entirety and only solved part of it.
Now, as far as the country flag and likes ...., I would have to see how the specific plugins are included in the templates or else you can edit them based on what instructions have now been shown. Best of luck!
Hello,
How i can get 'Country' Line? Because it's not visible in post_author_user
And Thanks!
(2018-10-05, 12:56 PM)iKsu Wrote: [ -> ]Hello,
How i can get 'Country' Line? Because it's not visible in post_author_user
And Thanks!

Without looking at the plugin I am merely assuming that there should be a template called "postbit_country"?


So if I am correct you would edit it like so:

postbit_country:


<br /><i class="fas fa-flag flagcount"></i>&nbsp;{$lang->country}: <img src="{$country['flag']}" alt="{$country['name']}" title="{$country['name']}" />

And add this to global.css:

i.flagcount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}
(2018-10-05, 02:05 PM)vintagedaddyo Wrote: [ -> ]
(2018-10-05, 12:56 PM)iKsu Wrote: [ -> ]Hello,
How i can get 'Country' Line? Because it's not visible in post_author_user
And Thanks!

Without looking at the plugin I am merely assuming that there should be a template called "postbit_country"?


So if I am correct you would edit it like so:

postbit_country:


<br /><i class="fas fa-flag flagcount"></i>&nbsp;{$lang->country}: <img src="{$country['flag']}" alt="{$country['name']}" title="{$country['name']}" />

And add this to global.css:

i.flagcount {
   padding-right: 3px;
   color: #555;
   font-size: 14px;
}

Sorry, but i did not find template with this name 'postbit_country' so what can i do now? 
Please try to help me with any other way and Thanks a lot for replying!
Pages: 1 2 3