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.