Large font awesome icons on mobile phone

Question

I have a nuxtjs static web app I have hosted on Netlify. This web has the following config

   export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'client',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Customize the progress-bar color
  loading: { color: '#fff' },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['~/assets/scss/main.scss', '@fortawesome/fontawesome-svg-core/styles.css'],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module',
    [
      '@nuxtjs/fontawesome',
      {
        css: true,
        icons: {
          solid: [
            'faAngleLeft',
            'faAngleRight',
            'faChartLine',
            'faCheckCircle',
            'faCog',
            'faLink',
            'faPaintBrush',
            'faUserGraduate',
          ],
          brands: ['faApple', 'faGoogle'],
        },
      },
    ],
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/buefy
    [
      'nuxt-buefy',
      {
        defaultIconPack: 'fas',
        defaultIconComponent: 'FontAwesomeIcon',
        materialDesignIcons: 'false',
        defaultIconPrev: 'angle-left',
        defaultIconNext: 'angle-right'
      },
    ],
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/',
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
  target: 'static',
}

The following packages are installed

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "nuxt-buefy": "^0.4.13",
    "sass-loader": "10.1.1",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss-html": "^1.3.0",
    "prettier": "^2.5.1",
    "sass": "^1.53.0",
    "sass-loader": "10.1.1",
    "stylelint": "^14.1.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recommended-vue": "^1.1.0",
    "stylelint-config-standard": "^24.0.0"
  } ...

The problem is that on any iPhone the font awesome icons on any buefy component fill the screen. Am I doing something wrong? or is there a bug with nuxt-buefy or even font awesome? In this project I am using nuxtjs, font-awesome, nuxt-buefy, and sass

I have tried different configurations, and I even went to the extent of creating a plugin. If you need anymore information from me, just let me know. Thank you for your time.

What I have found so far:

1. <font-awesome-icon …> renders perfectly fine. So it may be the way Buefy handles the icons and sass(to css). It also could have to do with the fact that my target is set to static and SSR is enabled
2. It also may just be that safari does not support some of the CSS applied to font awesome icons

As of right now, I will be using MDI until this issue is resolved. MDI renders perfectly fine ✌🏼

Answer 1

This case is not font-awesome-icon error. I had this problem too, I removed this one, and it worked for me. you can try. The part I commented was the part that caused the error.

    html {
      overflow-x: hidden;
      //font-size: 62.5%;
      //font-size-adjust: 100;
      //-ms-text-size-adjust: 100%;
      //-webkit-text-size-adjust: 100%;
    }