Support

  1. dagroupinc
  2. Support
  3. Monday, January 06 2020, 12:13 AM
  4.  Subscribe via email
Is there a way to add in the font awesome icons when creating the user profile fields like:

email
URL
phone
admin Accepted Answer
Admin
Hi,
there are 2 ways:
1) with CSS but it is a bit complex
2) By using Joomla language constants, for example you can use a language constant for a title of the field and set the content of language constant with HTML that render the font icon
Example:
- Change the title of email field to ICON_MAIL (screenshot 1)
- Go to Extensions->Languages->Overrides
- Click to "New" Button
- Set parameters like screenshot 2
- Save and see result (screenshot 3)
Attachments (3)
  1. more than a month ago
  2. Support
  3. # 1
dagroupinc Accepted Answer
Pro
Two questions:

1) Which icons are being pulled in (so I can see my options), and
2) How do you remove the colons? (see attached)
Attachments (1)
  1. more than a month ago
  2. Support
  3. # 2
dagroupinc Accepted Answer
Pro
I found them but there doesn't seem to be an icon for website, or globe and Font Awesome icons don't pull in either.
  1. more than a month ago
  2. Support
  3. # 3
admin Accepted Answer
Admin
Hi,
1) Which icons are being pulled in (so I can see my options)
This depends from your template, for example Joomla default template called "Protostar" uses Bootstrap 2 glyphicons (https://getbootstrap.com/2.3.2/base-css.html#icons)

2) How do you remove the colons?

try to add following CSS code to your template:
.jsn-l-field-title{font-size:0px;}.jsn-l-field-title .icon{font-size:15px;margin-right:10px}
  1. more than a month ago
  2. Support
  3. # 4
dagroupinc Accepted Answer
Pro
1) I see that. However, we want to use the free Font Awesome icons instead. We tried calling those w/the language overrides and modifying it as follows:

<i class="fas fa-globe"></i>
<i class="fas fa-envelope”></i>

and then added the following to css:

@font-face {
font-family: 'Font Awesome 5 Free';
src: url(https://use.fontawesome.com/releases/v5.7.1/css/all.css);
font-weight: 900;
font-style: normal;
}

but it doesn't pull them in—all we get is the empty square box.

Thoughts?
  1. more than a month ago
  2. Support
  3. # 5
admin Accepted Answer
Admin
Hi,
your code seems wrong, you have included the CSS url into font-face statement.

You need to use something like this at the top of the CSS file:
@import url("https://use.fontawesome.com/releases/v5.7.1/css/all.css");


see references at https://www.w3schools.com/cssref/pr_import_rule.asp
  1. more than a month ago
  2. Support
  3. # 6
dagroupinc Accepted Answer
Pro
Ah yes, I get those confused. With the language override method you describe, it replaces the text with the icon site-wide meaning the ic0pns appear on the edit profile page as well. I don't suppose there's a way to have the text on the edit profile pages and icons on the public-facing pages?

Thank you!
  1. more than a month ago
  2. Support
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Request Support

Support is currently Offline

Support Availability

Working days: Monday to Friday. The support staff is not available on weekends; in the most of cases tickets will not be answered during that time.

Reply time: Depending on the complexity of your support issue it's usually between a few minutes and 24 hours for paid members and about one week for free members. When we expect longer delays we will notify you.

Guidelines

Before you post: read the documentation and search the forums for an answer to your question.

When you post: include Site Details if you request a support (you can use the form below the reply in Site Details tab).

Auto Solved Question: If after a week the author of the post does not reply to a request by moderator, the question will be marked as resolved.

Language: only English

Search Users

Easy Profile® is not affiliated with or endorsed by Open Source Matters or the Joomla Project. Joomla is Free Software released under the GNU/GPL License.