Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Problem using circular FontAwesome icon within Image component #7853

Copy link
Copy link
Open
@felixkrautschuk

Description

@felixkrautschuk
Issue body actions

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: 6.1.2
  • Cross-platform modules: 6.1.1
  • Android Runtime: 6.1.0
  • iOS Runtime: 6.1.1
  • Plugin(s): -

Describe the bug
In our real app we want to show circular avatar-images of our users within a ListView and if the user has no image, we want to show a placeholder image while using a FontAwesome icon as the source of the Image.

https://fontawesome.com/icons/user-circle?style=solid

Here are the problems:

Problem 1
When using stretch="aspectFill", the image FontAwesome icon gets blurred and does not fill the whole image, as you can see a border around the icon.

<Image stretch="aspectFill" src="{{ imageUrl ? imageUrl : 'font://&#xf2bd;' }}" className="profileimage profileimage-list fa-solid"/>

.profileimage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    vertical-align: center;

    background-color: darkcyan;
    color: aliceblue;
}


.profileimage-list {
    width: 50;
    height: 50;
}

You can see the effect in the large image in the top left and in the images within the list in the screenshot below.

Problem 2:
According to the docs, one should set stretch to none and set a fontSize to the Image.

<Image stretch="none" src="font://&#xf2bd;"className="profileimage profileimage-large-custom fa-solid"/>

.profileimage-large-custom {
    width: 100;
    height: 100;
    font-size: 30;
}

This way, the icon has no blurred effect (as expected), but it is not possible to center and stretch the icon within the Image component, as the results looks different on all test devices. (See the top right image in the screenshot). So on some devices, the icon is too large and does not fit into the Image component, and on other devices, the icon is too small and is not centered within the Image component.

Result:
image2

To Reproduce
Open the sample app provided below.

Sample project
NSImageIconFontIssue.zip

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.