Web Analytics Made Easy -
StatCounter Icon sizes: How can I resize them? - CodingForum

Announcement

Collapse
No announcement yet.

Icon sizes: How can I resize them?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Icon sizes: How can I resize them?

    Hi Helpful community

    I have a wordpress site, and can input custom css into the styling menu so is there someone who could help solve this problem?

    I have 3 orange icons on the home page, “stay active” , “feel at home” and “go explore”

    Is there a custom css code that someone has that would allow me the freedom to change the size of these icons?

    Isenzo Tours – Action Holiday Adventures

    Thanks

    Tony

  • #2
    the image tag = <img> has attributes look them up.
    HTML img tag
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      You can also use CSS - then they can be resized based on the viewport so they still fit on smaller screens.
      Stephen
      Learn Modern JavaScript - http://javascriptexample.net/
      Helping others to solve their computer problem at http://www.felgall.com/

      Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

      Comment


      • #4
        Originally posted by sunfighter View Post
        the image tag = <img> has attributes look them up.
        HTML img tag
        They're not images, they're "fontAwesome".

        Code:
        <i class="fa flaticon-font-home-outlined-symbol box-icon-big box-icon-top box-icon-center round st_1474317501 animate-icon-top-to-bottom   box-icon-to- "></i>
        Which means we need to backtrack whatever class is setting the size... let's see, document inspector in Vivaldi says the font size is set by...

        Code:
        [class^="flaticon-font-"]:before, [class*=" flaticon-font-"]:before, [class^="flaticon-font-"]:after, [class*=" flaticon-font-"]:after
        Which is setting it to 18px... so find that in flatIcon.css and change it, just beware it might effect other fonts on the page. Another approach would be to try and override it with some new CSS off a parent selector. Given the train wreck DISASTER of a codebase that's there with the endless pointless overriding classes, one might have to resort to the "do not use unless your code is ****" !important override... or blindly sit there randomly trying values until you manage to override it.

        ... though honestly given the bloated laundry list of how not to build a website there, I'd just put a bullet in it and start over from scratch... particularly given what a stunning example of Every ****ing bootstrap site ever it is. Particularly with the absolutely nutters 6 megabyte pageload spanning 200+ files to deliver 1.15k of plaintext and zero legitimate content images. Even accounting for the google maps part, that's ten times the needed file count and 60 times larger than I'd allow a page on a site to reach...

        Hence the ridiculous and painful 218 second cache-empty page-load here... when the majority of users will give up and go somewhere else at about the 20 second mark.

        Put a fork in it... then open the trash can and put it in. I pity anyone DUPED into deploying that as a live website as it's a poster child for everything wrong with slapping together off the shelf parts, and in its current form it is DOOMED to failure.
        Walk the dark path, sleep with angels, call the past for help.
        https://cutcodedown.com
        https://medium.com/@deathshadow

        Comment

        Working...
        X