Ionic Fabs

The position of the icon inside the fab button is to the left. Check out the attached picture.Capture4
How do I make it go to the center?

Thank you so much!

Hi dhruv
can you able to run ionic serve.
Help out i`m facing issue while running ionic serve

////---------project info
events.js:183
throw er; // Unhandled ‘error’ event
^

Error: spawn cmd ENOENT
at _errnoException (util.js:992:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
at onErrorNT (internal/child_process.js:372:16)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)

Here ionic info
Ionic:

ionic (Ionic CLI) : 4.1.1 (C:\Users\mohammed.riyazuddin\App
node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins to

System:

NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 7
and my package json
{
“name”: “myapp”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“start”: “ionic-app-scripts serve”,
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”
},
“dependencies”: {
@angular/animations”: “5.2.11”,
@angular/common”: “5.2.11”,
@angular/compiler”: “5.2.11”,
@angular/compiler-cli”: “5.2.11”,
@angular/core”: “5.2.11”,
@angular/forms”: “5.2.11”,
@angular/http”: “5.2.11”,
@angular/platform-browser”: “5.2.11”,
@angular/platform-browser-dynamic”: “5.2.11”,
@ionic-native/core”: “~4.11.0”,
@ionic-native/splash-screen”: “~4.11.0”,
@ionic-native/status-bar”: “~4.11.0”,
@ionic/storage”: “2.1.3”,
“ionic”: “^3.6.0”,
“ionic-angular”: “3.9.2”,
“ionicons”: “3.0.0”,
“rxjs”: “5.5.11”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.26”
},
“devDependencies”: {
@ionic/app-scripts”: “3.1.11”,
“typescript”: “~2.6.2”,
“ws”: “^3.3.2”
},
“description”: “An Ionic project”
}

Just add these lines in your scss file

.fab{
line-width: 100% !important;
line-height: 100% !important;
}

@leelaprasadsahu It says that line-width is not a recognized property. What should I do?

Would better to see your code to be able help you faster

This is the html code:
<ion-header>

<ion-navbar>

<ion-title>Reports</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-fab bottom left>

<button ion-fab color=“primary” (click)=“createReport()”><ion-icon name=“add”></ion-icon></button>

</ion-fab>

<ion-fab bottom right>

<button ion-fab><ion-icon name=“camera”></ion-icon></button>

</ion-fab>

<ion-fab top right>

<button ion-fab>Button</button>

</ion-fab>

</ion-content>

Just use text-center like discribed here. I think this is what they called directive.

(I think ion-icon or button is the right tag for it)

@m4tze Thanks. Its working!

Can you share your scss for fab. I think you are not using default fab, there must be some customization. Please share your scss and fab html.