CSS Problem

[mariante]

Hello! I've implemented the import and vue.use then when I use the component the css isn't correct.

<ShareNetwork
  v-for="network in compartilhar.destinos"
  :network="network.network"
  :key="network.network"
  :style="{backgroundColor: network.color}"
  :url="compartilhar.url"
  :title="compartilhar.title"
  :description="compartilhar.description"
  :quote="compartilhar.quote"
  :hashtags="compartilhar.hashtags"
>
  <i :class="network.icon"></i>
  <span>{{ network.name }}</span>
</ShareNetwork>

##data
    compartilhar: {
      url: 'https://news.vuejs.org/issues/180',
      title: 'Say hi to Vite! A brand new, extremely fast development setup for Vue.',
      description: 'This week, I’d like to introduce you to "Vite", which means "Fast". It’s a brand new development setup created by Evan You.',
      quote: 'The hot reload is so fast it\'s near instant. - Evan You',
      hashtags: 'vuejs,vite,javascript',
      destinos: [
        { network: 'facebook', name: 'Facebook', icon: 'fab fah fa-lg fa-facebook-f', color: '#1877f2' },
        { network: 'whatsapp', name: 'Whatsapp', icon: 'fab fah fa-lg fa-whatsapp', color: '#25d366' }
      ]
    }

##main.js
import VueSocialSharing from 'vue-social-sharing'
Vue.use(VueSocialSharing)

[superdiazzz]

Hello! I've implemented the import and vue.use then when I use the component the css isn't correct.

<ShareNetwork
  v-for="network in compartilhar.destinos"
  :network="network.network"
  :key="network.network"
  :style="{backgroundColor: network.color}"
  :url="compartilhar.url"
  :title="compartilhar.title"
  :description="compartilhar.description"
  :quote="compartilhar.quote"
  :hashtags="compartilhar.hashtags"
>
  <i :class="network.icon"></i>
  <span>{{ network.name }}</span>
</ShareNetwork>

##data
    compartilhar: {
      url: 'https://news.vuejs.org/issues/180',
      title: 'Say hi to Vite! A brand new, extremely fast development setup for Vue.',
      description: 'This week, I’d like to introduce you to "Vite", which means "Fast". It’s a brand new development setup created by Evan You.',
      quote: 'The hot reload is so fast it\'s near instant. - Evan You',
      hashtags: 'vuejs,vite,javascript',
      destinos: [
        { network: 'facebook', name: 'Facebook', icon: 'fab fah fa-lg fa-facebook-f', color: '#1877f2' },
        { network: 'whatsapp', name: 'Whatsapp', icon: 'fab fah fa-lg fa-whatsapp', color: '#25d366' }
      ]
    }

##main.js
import VueSocialSharing from 'vue-social-sharing'
Vue.use(VueSocialSharing)

How do you solved this?

[superdiazzz]

Hello! I've implemented the import and vue.use then when I use the component the css isn't correct.

<ShareNetwork
  v-for="network in compartilhar.destinos"
  :network="network.network"
  :key="network.network"
  :style="{backgroundColor: network.color}"
  :url="compartilhar.url"
  :title="compartilhar.title"
  :description="compartilhar.description"
  :quote="compartilhar.quote"
  :hashtags="compartilhar.hashtags"
>
  <i :class="network.icon"></i>
  <span>{{ network.name }}</span>
</ShareNetwork>

##data
    compartilhar: {
      url: 'https://news.vuejs.org/issues/180',
      title: 'Say hi to Vite! A brand new, extremely fast development setup for Vue.',
      description: 'This week, I’d like to introduce you to "Vite", which means "Fast". It’s a brand new development setup created by Evan You.',
      quote: 'The hot reload is so fast it\'s near instant. - Evan You',
      hashtags: 'vuejs,vite,javascript',
      destinos: [
        { network: 'facebook', name: 'Facebook', icon: 'fab fah fa-lg fa-facebook-f', color: '#1877f2' },
        { network: 'whatsapp', name: 'Whatsapp', icon: 'fab fah fa-lg fa-whatsapp', color: '#25d366' }
      ]
    }

##main.js
import VueSocialSharing from 'vue-social-sharing'
Vue.use(VueSocialSharing)

How do you solved this?

i solved with this css modifications

 a[class^="share-network-"] .fah {
    color: #fff;
    padding: 2px;
    flex: 0 1 auto;
  }