Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FAB icon is not centered when using FontAwesome icons

See original GitHub issue

Environment

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-4650U CPU @ 1.70GHz
    Memory: 486.68 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.8.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 25.0.2, 28.0.3
      System Images: android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64
  IDEs:
    Android Studio: 3.4 AI-183.5429.30.34.5452501
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Description

I use FontAwesome by default:

        <PaperProvider
          settings={{
            icon: props => <AwesomeIcon {...props} />,
          }}>

When I use FAB button it renders + icon not centered

        <FAB
          style={styles.addButton}
          icon="plus"
          onPress={() => this.props.navigation.navigate('AddEntry')}
        />

Here is screenshot: https://screencast.com/t/N9eojY12lkjY

Reproducible Demo

Set FontAwesome as a default icons source, use FAB with “plus” icon.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

firedecommented, Feb 22, 2020

Add style textAlign: center to solve this issue:

<PaperProvider
  settings={{
    icon: props => <AwesomeIcon style={{ textAlign: "center" }} {...props} />,
  }}>

…or you can write a component to fix the width (like this).

0reactions

github-actions[bot]commented, Apr 23, 2020

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

Top Results From Across the Web

Android: Floating Button Icon is not centred - Stack Overflow

This usually arises when using custom-sized floating action button(FAB), because android by ... and set fab:fab_icon="@drawable/ic_fab_star" to center icon.

FloatingActionButton - Font Awesome icons are not centered

When using fontawesome as icons for floating action button, they are not centered as like dx icons. Here is a snippet, derived from...

How to target all Font Awesome icons and align them center?

The most preferred way to center Font Awesome Icons is to assign a center class to each <i> tag. Setting width to 100%,...

Examples - Font Awesome

Use fa -fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in...

Fontawesome Pro Icons not aligning in button

Hi all, I use the Font Awesome Pro icons and they don't seem to align to the center when using several copy/paste codes,...