Log in | Register
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Image Style - How to svg Font Awesome

Topic-icon Image Style - How to svg Font Awesome

Active Subscriptions:

None
5 years 4 months ago #64848 by joomleb
Hi guys,
SCLogin > Social Button Settings > Image Style:

Please, Do you have a workaround on How to set Font Awesone colored .svg icons fontawesome.com/v4.7.0/icon/ ?!?
The topic has been locked.
Support Specialist
5 years 4 months ago #64851 by alzander
Can you explain a bit more about what you're trying to do? Are you trying to use SVG icons for the social login buttons? The link you showed above doesn't work. If you could point to the actual icons, we could do some testing to see if we can help out.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
5 years 4 months ago #64855 by joomleb
Hi Alex,
Yes, I mean:
- SCLogin module > Social Button Settings > Social Login Buttons: Custom
- SCLogin module > Social Button Settings > Image Style: ... = Please, Do you have a workaround / a trick on how to set as Social Icons "Font Awesone colored .svg icons" fontawesome.com/v4.7.0/icons/ instead of the .png uploaded by default ?!?
The topic has been locked.
Support Specialist
5 years 4 months ago #64864 by alzander
All JFBConnect social buttons can be included manually anywhere you want on your site. You can use our SCLogin module, any other login module or even a custom HTML to fully customize the login area experience.

For each social network login button, all you need to use is the following code:
<a href="javascript:void(0)" onclick="jfbc.login.provider('NETWORK');">Login with NETWORK</a>
Where network is any of the networks we support, like facebook, twitter, googleplus, linkedin, etc.

With that, you can wrap it in a div or use the anchor link to use the Font Awesome icons however works best for your site.

I hope that helps, but if you need anything else, please let us know.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
5 years 4 months ago #64880 by joomleb
Hi Alex,
thanks for the suggestion, I tested it with the joomla standard
"Login Form > Module > Post-Text: <a href=javascript:void(0)" onclick="jfbc.login.provider('Facebook');">Login with Facebook</a>"
But only the the final "<a>Login with Facebook</a>" is saved and it is not running.

Please, Do you have any suggestions ?
Please, Is there a way to add a Font Awesome icon as image ?
The topic has been locked.
Support Specialist
5 years 4 months ago #64884 by alzander
I'm not sure if the text you posted above is missing some fields because of how you posted it, or if you made the mistake. Either way, please make sure there is a double-quote after the href=, like:
<a href="javascript:void(0)" onclick="jfbc.login.provider('Facebook');">Login with Facebook</a>

If that doesn't work, try using our easy tag in that field:
{JFBCLogin providers=facebook image=facebook.svg}
The facebook.svg file must be in the /media/sourcecoast/providers/facebook directory.

This is our documentation section for the raw HTML tag, by the way:
www.sourcecoast.com/jfbconnect/features/...acebook-login-button

I hope that helps,
Alex
The topic has been locked.
Active Subscriptions:

None
5 years 3 months ago #64896 by joomleb
Hi Alex,
Thanks for helping:

About Code: "Login Form > Module > Post-Text: <a href="javascript:void(0)" onclick="jfbc.login.provider('Facebook');">Login with Facebook</a>
I confirm you that is saved as: "<a>Login with Facebook</a>" and it is not running.
Do you think is a Joomla Login Form issue to post on GitHub ?

About Easy Tag: as you can see on my test site test.egulp.net/ into the left offcanvas position:
- I added the .svg icon to the directory: /media/sourcecoast/images/provider/facebook - Anyway I tested it also with .png icon - PS Be careful with the directory
- I added the Easy Tag code: {JFBCLogin providers=facebook image=facebook.svg} - I red the documentation, thanks (I suggest to add this example there, useful)
But I have back a brocken icon image and the "Login with Facebook" as plain link text instead as simple tooltip. Please, How to fix it ?
The topic has been locked.
Support Specialist
5 years 3 months ago #64921 by alzander
For the Login Form posttext, I don't think it's a bug. I think the pre/post text fields do extra filtering to prevent bad code and other problems. The easy-tags are a good way to get around those issues.

As for the Easy-Tag, I can't load either the svg or png file directly. Try going to this link (with your domain of course) and see if it loads for you:
media/sourcecoast/images/provider/facebook/facebook.svg
I get a 404 error. That's the URL that the Facebook login link is trying to load with the Easy-Tag, so once you get the image to work directly, the easy-tag should work as well.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
5 years 3 months ago #64922 by joomleb
Hi Alex,
Easy Tag
checked again and the icon is running, you can see it on my test site test.egulp.net/ into the left offcanvas position

Please, Do you have a trick to run a .svg icon also using SCLogin (instead of the default .png) ?
The topic has been locked.
Support Specialist
5 years 3 months ago #64935 by alzander
To show SVG files in the SCLogin module and JFBConnect options, please edit the following file:
/administrator/components/com_jfbconnect/models/fields/providerloginbutton.php
Toward the bottom around line 98, you'll see:
$buttons = JFolder::files($folder, '^' . '.*(\.png|\.jpg|\.gif)$');
Update that to:
$buttons = JFolder::files($folder, '^' . '.*(\.png|\.jpg|\.gif|\.svg)$');
Let us know if that works how you're expecting and we can make sure that makes it into a future release.

Thanks,
Alex
The topic has been locked.
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Image Style - How to svg Font Awesome
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS