Cool feature: Add Font Awesome Icons as a group image [Tutorial]

tutorial
william04gamera
groups
custom_groups

#1

Hello!

In this guide, I will show you something I discovered by editing my Summer Camp Group. This is not a duplication of this topic:


Why? Because I am not talking about adding an image as a group icon. I am talking about something that is called Font Awesome. Keep reading to learn more what it is and how to use it.


What is Font Awesome?

Font Awesome is a set of icons that web developers can use to make their site look cool. If you know what Flat Icons is, it´s really similar to Font Awesome. The icons provided by Font Awesome is not like normal images, you need to use code to add the icons. However, Discource has added a really cool function that makes it as easy as a pie. You don´t have to add any code. Here is how:

Add Font Awesome as a group icon:

Note: You need admin permission for your group in orders to add or change the group icon.

Step 1 - Accessing the settings:

Access your group by clicking on a tag that tags the group or going to the Groups page which is located here: http://forum.gethopscotch.com/groups. I am sure that there are other ways to get to your group, like visiting your profile page. Here is what the page will look like:


If you have Admin Permissions, you should see a button called "Edit Group":

Tap on the button.

After you have tapped on the button, you should see a page with a lot of settings for your group. Scroll down a bit.

After some scrolling, you should see this setting:

As you can see, we can put a normal image URL in there like this one: https://cdn.pixabay.com/photo/2017/03/27/14/49/beach-2179183_960_720.jpg
But, we can also put a Font Awesome class in there. To do that, do like this:

Step 2 - Find the icon that you want:

Note: Font Awesome has a diffent website look depending on if you are on a mobile device or a computer. I am on a computer, but the only thing that is different is the design. You should do the same things on both kind of devices, don´t worry.
Font Awesome has over 600 icons, and in order to find the classes for each icon, visit http://fontawesome.io
In the top of the Font Awesome website, you should find a menu. On mobile devices, it might look a little bit different if you are on a computer like I am right now. In the menu, tap on "Icons".


After that, you should see a big list of all the icons. Here is how it looks:

When you have found the icon that you want, tap on it. I want this one:
After you have tapped on the icon that you want, you should see a page with some information about the icon. It looks like this:
Now, we just have to copy the Font Awesome Class, a little bit of text. It is displayed in a box, and you can just copy the text.


Now, it is time to add the icon into our group.

Step 3 - Add the icon to your group:

When you have copied the text, paste it into the settings box called "Avatar Flair Image", like this:

You should now see a preview of your icon next to the settings box. Cool, everything is all right! Now, you might have noticed that there are another setting added: Avatar Flair Color. If you want, you can paste in a hex color code here. if you Google "hex color", you should see a hex color picker. I have found my Hex Color Code, so I will paste it into the box:

The "Preview Icon" should also change it´s color.
Now, don´t forget to save your changes by tapping this blue button at the bottom of the settings page:

And the icon should appear. If not, try to refresh the page and go out of group editing mode.

You have just learned how to add icons to your group! You now have access to over 600 icons and 16,777,216 icon colors! I hope that you like this tutorial!


@OMTL


Request a custom group in the forum [Closed]
Request a custom group in the forum [Closed]
Must Read for New Users!
Must Read for New Users!
#2

Awesome tutorial!!!


#3

Thank you! It took pretty long time to write...


#4

woh nice I'm going to try it in group


#5

Cool, I hope that it will work!


#6

yeah I'm trying to get the icons but it's taking a long time to load


#7

What is taking long time to load?


#8

the icons I'm on the website and I pressed the icons button now it's loading


#9

Okay, I hope that it will be able to load.


#10

got it I'm trying to think which one to choose there are too many otions!!


#11

Yes, with over 600 icons it´s not easy to choose one :slight_smile:


#12

I choosed fa-bug for MaTH team group it looks cool ! Now I'M deciding the colors


#13

Cool! Does everything look good right now? No troubles?


#14

yep I think I'm going to use this website for a lot of stuff thx!


#15

No problem, I´m glad that it worked fine!


#16

Wow! Thank you for this informative and helpful tutorial! :wink: